W3School 
jQuery Ul 教程 


— | Published 
WIZararorce with GitBook 


W3School jQuery UI 教程 


= SX 
fría 
jQuery UI 基础 
jQuery UI 简介 
jQuery Ul FR 


jQuery UI 使 用 
jQuery UI 定制 
jQuery Ul 工作 原理 

jQuery Ul 主题 
jQuery Ul 主题 
jQuery UI ThemeRoller 
jQuery UI CSS 框架 API 
jQuery UI 设计 主题 

jQuery UI 部 件 库 
jQuery UI 部 件 库 (Widget Factory) 
jQuery UI 通过 部 件 库 (Widget Factory) 扩展 小 部 件 
jQuery UI 小 部 件 (Widget) 方法 调用 
jQuery Ul 为 什么 使 用 部 件 库 (Widget Factory) 
jQuery UI 如 何 使 用 部 件 库 (Widget Factory) 

jQuery UI 实例 
jQuery UI 3: i 
jQuery UI 3:5 
jQuery UI z: 
jQuery UI 3: ff 
jQuery UI 3: i 
jQuery UI 3: ii 
jQuery UI 3: i 
jQuery UI 3: ii 
jQuery UI 3: ii 
jQuery UI 3: i 
jQuery UI 3: i 
jQuery UI 3: i 
jQuery UI 3: f 


e 


#824 (Draggable) 

放置 (Droppable) 

缩放 (Resizable) 

选择 (Selectable) 
-排序 (Sortable) 

- #1 # MR (Accordion) 

- 自动 完成 (Autocomplete) 
-按钮 (Button) 

- 日 期 选择 器 (Datepicker) 
- 对 话 框 (Dialog) 

- 32% (Menu) 

- 进度 条 (Progressbar) 
jQuery UI 实例 - 滑 块 (Slider) 

jQuery UI 实例 - 旋转 器 (Spinner) 
jQuery UI 实例 - 标签 页 (Tabs) 


=. |= 


= (m ESS wu SS ES eS ul uu £u 


SS 


W3School jQuery UI 教程 


jQuery UI 实例 - 工具 提示 框 (Tooltip) 
jQuery UI 实例 - 特效 (Effect) 

jQuery UI 实例 - 显示 (Show) 

jQuery UI 实例 - 隐藏 (Hide) 

jQuery UI 实例 - 切换 (Toggle) 

jQuery UI 实例 - 添加 Class (Add Class) 
jQuery UI 实例 - ER Class (Remove Class) 
jQuery UI 实例 - 切换 Class (Toggle Class) 
jQuery UI 实例 - 转换 Class (Switch Class) 
jQuery UI 实例 - 颜色 动画 (Color Animation) 
jQuery UI 实例 - 定位 (Position) 

jQuery UI 实例 - 部 件 库 (Widget Factory) 


jQuery UI API 参考 


jQuery UI API 类 别 - 特效 (Effects) 
jQuery UI API - .addClass() 
jQuery UI API - 百叶 窗 特 效 (Blind Effect) 
jQuery UI API - 反弹 特效 (Bounce Effect) 
jQuery UI API - 剪辑 特效 (Clip Effect) 


jQuery UI API - 颜色 动画 (Color Animation) 


jQuery UI API - 降落 特效 (Drop Effect) 
jQuery UI API - Easings 
jQuery UI API - .effect() 


jQuery UI API - 爆炸 特效 (Explode Effect) 
jQuery UI API - 淡 入 淡出 特效 (Fade Effect) 


jQuery UI API - #7 & r3. (Fold Effect) 
jQuery UI API - .hide() 


jQuery UI API - 突出 特效 (Highlight Effect) 


jQuery UI API - 膨胀 特效 (Puff Effect) 
jQuery UI API - 跳动 特效 (Pulsate Effect) 
jQuery UI API - .removeClass() 

jQuery UI API - 缩放 特效 (Scale Effect) 
jQuery UI API - 震动 特效 (Shake Effect) 
jQuery UI API - .show() 

jQuery UI API - 尺寸 特效 (Size Effect) 
jQuery UI API - 滑动 特效 (Slide Effect) 
jQuery UI API - .switchClass() 

jQuery UI API - .toggle() 

jQuery UI API - .toggleClass() 


jQuery UI API - 转移 特效 (Transfer Effect) 


W3School jQuery UI 教程 


jQuery UI API 类 别 - 特效 核心 (Effects Core) 
jQuery UI API - 颜色 动画 (Color Animation) 
jQuery UI API # #] - 388 (Interactions) 
jQuery UI API - 可 拖 搜 小 部 件 (Draggable Widget) 
jQuery UI API - 可 放置 小 部 件 (Droppable Widget) 
jQuery UI API - 鼠标 交互 (Mouse Interaction) 
jQuery UI API - 可 调整 尺寸 小 部 件 (Resizable Widget) 
jQuery UI API - 可 选择 小 部 件 (Selectable Widget) 
jQuery UI API - 可 排序 小 部 件 (Sortable Widget) 
jQuery UI API 类 别 - AHR (Method Overrides) 
jQuery UI API - .focus() 
jQuery UI API - .position() 
jQuery UI API 类 别 -方法 (Methods) 
jQuery UI API - .disableSelection() 
jQuery UI API - .enableSelection() 
jQuery UI API - .removeUniqueld() 
jQuery UI API - .scrollParent() 
jQuery UI API - .uniqueld() 
jQuery UI API - .zIndex() 
jQuery UI API X #1 - 选择 器 (Selectors) 
jQuery UI API - :data() Selector 
jQuery UI API - :focusable Selector 
jQuery UI API - :tabbable Selector 
jQuery UI API X: $| - 主题 (Theming) 
jQuery UI API - CSS 框架 (CSS Framework) 
jQuery UI API - 图 标 (Icons) 
jQuery UI API - H #753% (Stacking Elements) 
jQuery UI API X #] - UI 核心 (UI Core) 
jQuery UI API X $| - 实用 工具 (Utilities) 
jQuery UI API - B44 (Widget Factory) 
jQuery UI API - 插件 桥 (Widget Plugin Bridge) 
jQuery UI API X #] - 小 部 件 (Widgets) 
jQuery UI API - 折 受 面板 部 件 (Accordion Widget) 
jQuery UI API - 自动 完成 部 件 (Autocomplete Widget) 
jQuery UI API - 按钮 部 件 (Button Widget) 
jQuery UI API -日 期 选择 器 部 件 (Datepicker Widget) 
jQuery UI API - 对 话 框 部 件 (Dialog Widget) 
jQuery UI API - 菜单 部 件 (Menu Widget) 
jQuery UI API - 进度 条 部 件 (Progressbar Widget) 


W3School jQuery UI 教程 


jQuery UI API - 滑 块 部 件 (Slider Widget) 5.10.8 

jQuery UI API - 旋转 器 部 件 (Spinner Widget) 5.10.9 

jQuery UI API - 标签 页 部 件 (Tabs Widget) 5.10.10 

jQuery UI API - 工具 提示 框 部 件 (Tooltip Widget) 5.10.11 

jQuery EasyUl 简介 6 
jQuery EasyUl 应 用 7 
jQuery EasyUl 应 用 - 创建 CRUD 应 用 7.1 
jQuery EasyUl 应 用 - 创建 CRUD 数据 网 格 (DataGrid) 7.2 
jQuery EasyUl 应 用 - 创建 展开 行 明细 编辑 表单 的 CRUD 应 用 7.3 
jQuery EasyUl 应 用 - 创建 RSS Feed 阅读 器 7.4 
jQuery EasyUl 拖 放 8 
jQuery EasyUl 拖 放 - 基本 的 拖 动 和 放置 8.1 
jQuery EasyUl 拖 放 - 创建 拖 放 的 购物 车 8.2 
jQuery EasyUl 拖 放 - 创建 学 校 课 程 表 8.3 
jQuery EasyUl 菜单 与 按钮 9 
jQuery EasyUl 菜单 与 按钮 - 创建 简单 的 菜单 9.1 
jQuery EasyUl 菜单 与 按钮 - 创建 链接 按钮 (Link Button) 9.2 
jQuery EasyUl 菜单 与 按钮 - 创建 菜单 按钮 (Menu Button) 9.3 
jQuery EasyUl 菜单 与 按钮 - 创建 分 割 按钮 (Split Button) 9.4 
jQuery EasyUl 布局 10 
jQuery EasyUl 布局 - 为 网 页 创建 边框 布局 10.1 
jQuery EasyUl 布局 - 在 面板 中 创建 复杂 布局 10.2 
jQuery EasyUl 布局 - 6| ir d Mik 10.3 
jQuery EasyUl 布局 - 创建 标签 页 (Tabs) 10.4 
jQuery EasyUl 布局 - 动态 添加 标签 页 (Tabs) 10.5 
jQuery EasyUl 布局 - 添加 自动 播放 标签 页 (Tabs) 10.6 
jQuery EasyUl 布局 - 创建 XP 风格 左 侧 面板 10.7 
jQuery EasyUl 数据 网 格 11 
jQuery EasyUl 数据 网 格 - 转换 HTML 表格 为 数据 网 格 11.1 
jQuery EasyUl 数据 网 格 - 取得 选中 行 数据 11.2 
jQuery EasyUl 数据 网 格 - 添加 查询 功能 11.3 
jQuery EasyUl 数据 网 格 - 添加 工具 栏 11.4 
jQuery EasyUl 数据 网 格 - 创建 复杂 工具 栏 11.5 
jQuery EasyUl 数据 网 格 - 设置 冻结 列 11.6 
jQuery EasyUl 数据 网 格 - 动态 改变 列 11.7 
jQuery EasyUl 数据 网 格 - 格式 化 列 11.8 
jQuery EasyUl 数据 网 格 - 设置 排序 11.9 
jQuery EasyUl 数据 网 格 - 自 定 义 排 序 11.10 
jQuery EasyUl 数据 网 格 - 创建 列 组 合 11.11 


W3School jQuery UI 教程 


jQuery EasyUl 数据 网 格 - 添加 复 选 杠 
jQuery EasyUl 数据 网 格 - 自 定义 分 页 
jQuery EasyUl 数据 网 格 - 启用 行内 编辑 
jQuery EasyUl 数据 网 格 - 扩展 编辑 器 
jQuery EasyUl 数据 网 格 - 列 运算 

jQuery EasyUl 数据 网 格 - 合并 单元 格 
jQuery EasyUl 数据 网 格 - 创建 自 定义 视图 
jQuery EasyUl 数据 网 格 - 创建 页 脚 摘要 
jQuery EasyUl 数据 网 格 - RA RETA ERES 
jQuery EasyUl 数据 网 格 - 创建 属性 网 格 
jQuery EasyUl 数据 网 格 - 扩展 行 显示 细节 
jQuery EasyUl 数据 网 格 - 创建 子 网 格 
jQuery EasyUl 数据 网 格 - 使 用 虚拟 滚动 视图 显 
jQuery EasyUl 数据 网 格 - 添加 分 页 组 件 


jQuery EasyUl 窗口 


jQuery EasyUl 窗口 - 创建 简单 窗口 
jQuery EasyUl 窗口 - 自 定义 窗口 工具 栏 
jQuery EasyUl 窗口 - 窗口 与 布局 
jQuery EasyUl 窗口 - 创建 对 话 框 


海量 数据 


jQuery EasyUl 窗口 - 自 定 义 带 有 工具 条 和 按钮 的 对 话 框 


jQuery EasyUl 树 形 菜单 


jQuery EasyUl 树 形 菜单 - 使 用 标记 创建 树 形 菜单 
jQuery EasyUl 树 形 菜单 - 创建 异步 树 形 菜 单 
jQuery EasyUl 树 形 菜单 - 树 形 菜 单 添 加 节点 


jQuery EasyUl 树 形 菜单 - 创建 带 复 选 框 的 树 形 菜单 


jQuery EasyUl 树 形 菜单 - 树 形 菜单 拖 放 控 制 
jQuery EasyUl 树 形 菜单 - 树 形 菜单 加 载 父 / 子 节点 
jQuery EasyUl 树 形 菜单 - 创建 基础 树 形 网 格 
jQuery EasyUl 树 形 菜单 - 创建 复杂 树 形 网 格 
jQuery EasyUl 树 形 菜单 - 树 形 网 格 动态 加 载 
jQuery EasyUl 树 形 菜单 - 树 形 网 格 添加 分 页 
jQuery EasyUl 树 形 菜单 - 树 形 网 格 惰性 加 载 节点 


jQuery EasyUl 表单 


jQuery EasyUl 表单 - 创建 异步 提交 表单 
jQuery EasyUl 表单 - 表单 验证 

jQuery EasyUl 表单 - 创建 树 形 下 拉 框 
jQuery EasyUl 表单 - 格式 化 下 拉 框 
jQuery EasyUl 表单 - 过 滤 下 拉 数 据 网 格 


jQuery EasyUl 插件 


W3School jQuery UI 教程 


jQuery EasyUl 扩展 
免责 声明 


16 
17 


W3School jQuery UI 教程 
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整理 : 飞龙 


jQuery Ul 基础 


jQuery UI 简介 


jQuery UI 是 一 个 建立 在 jQuery JavaScript 库 上 的 小 部 件 和 交互 库 ， 您 可 以 使 用 它 
创建 高 度 交 互 的 Web 应 用 程序 。 本 教程 业 向 您 讲解 jQuery UI 是 如 何 工作 的 。 


jQuery UI 特性 

fa] 2 zn Fd 

继承 jQuery 简易 使 用 特性 ， 提 供 高 度 抽象 接口 ， 短 期 改善 网 站 易 用 性 。 
开源 免费 

采用 MIT & GPL 双 协 议 授权 ， 轻 松 满足 自由 产品 至 企业 产品 各 种 授权 需求 。 
广泛 兼容 


兼容 各 主流 桌面 浏览 器 。 包 括 IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 
1+。 


轻便 快捷 

组 件 间 相 对 独立 ， 可 按 需 加 载 ， 避 免 浪 费 带 宽 拖 慢 网 页 打开 速度 。 

标准 先进 

支持 WAI-ARIA， 通 过 标准 XHTML 代码 提供 渐进 增强 ， 保 证 低 端 环 境 可 访问 性 。 
美观 多 变 


提供 近 20 种 预 设 主题 ， 并 可 自 定义 多 达 60 项 可 配置 样式 规划， 提供 24 种 背景 纹 
理 选择 。 


开放 公开 
从 结构 规划 到 代码 编写 ， 全 程 开 放 ， 文 档 、 人 代码、 讨论 ， 人 人 均 可 参与 。 
强力 支持 


Google 为 发 布 代码 提供 CDN 内 容 分 发 网 络 支持 。 


完整 汉化 
开发 包 内 置 包含 中 文 在 内 的 40 多 种 语言 包 。 


ER. TE 


e 1. 代 码 不 够 健壮 : 缺乏 全 面 的 测试 用 例 ， 部 分 组 件 Bugs 较 多 ， 不 能 达到 企业 
级 产品 开发 要 求 。 

e 2. 构 架 规 划 不 足 : 组 件 间 API 缺乏 协调 ， 缺 乏 配 合 使 用 帮助 。 

e。3. 控 件 较 少 : 相对 于 Dojo, YUI Ext JS 等 成 熟 产 品 ， 可 用 控件 较 少 ， 无 法 满 
足 复杂 界面 功能 要 求 。 


jQuery UI 下 载 


一 旦 您 对 jQuery UI 有 了 基本 了 解 ， 您 就 可 以 亲自 尝试 一 下 。 请 从 jQuery Ul 网 站 
上 的 Download Builder (下 载 生 成 器 ) WH FR jQuery Ul 的 副本 。 


创建 自 定义 jQuery UI 下 载 


jQuery Ul 的 下 载 生 成 器 (Download Builder) 人 允许 您 选择 您 需要 下 载 的 组 件 ， 为 项 
目 获取 一 个 自 定义 的 库 版 本 。 创 建 自 定义 jQuery U 下 载 需要 以 下 三 个 步骤 : 


步骤 1 : 选择 您 需要 的 组 件 


下 载 生 成 器 (Download Builder) 页 面 的 第 一 栏 列 出 了 jQuery Ul 所 有 的 
JavaScript 组 件 分 类 : 核心 (UI Core) 、 交 互 部 件 (Interactions) 、 小 部 件 
(Widgets) 和 效果 库 (Effects) 。jQuery Ul 中 的 一 些 组 件 依赖 于 其 他 组 件 ， 当 选 
中 这 些 组 件 时 ， 它 所 依赖 的 其 他 组 件 也 都 会 自动 被 选中 。 您 所 选 的 组 件 将 会 合并 到 
一 个 jQuery UI JavaScript 文件 。 
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步骤 2 : 选择 一 个 主题 或 者 目 定义 一 个 主题 


在 下 载 生 成 器 (Download Builder) 页 面 ， 您 将 看 到 一 个 文本 框 ， 列 出 了 一 系列 为 
jQuery UI 小 部 件 预先 设计 的 主题 。 您 dera 的 主题 中 选择 一 个 ， 也 可 以 
使 用 ThemeRoller 自 定义 一 个 主题 GER 节 的 讲解 ) o 


高 级 主题 设置 : 下 载 生成 器 (Download Builder) 的 主题 部 分 也 为 主题 提供 了 一 些 

AB. 如 果 您 打算 在 一 个 页 面 上 使 用 多 个 主题 ， 这 些 字 段 会 派 上 用 场 。 如 
您 打算 在 一 个 页 面 上 只 使 用 一 个 主题 ， 那么 您 完全 可 以 跳 过 这 些 设 t iB. 

步骤 3 : 选择 jQuery Ul 的 版 本 


在 下 载 生 成 器 (Download Builder) 中 ， 最 后 一 步 是 选择 一 个 版 本 号 。 这 个 步骤 很 
重要 ， 因 为 jQuery Ul 的 版 本 是 配合 特定 的 jQuery 版 本 设计 的 。 目 前 的 版 本 有 : 


e jQuery Ul 1.10.2 - 要 求 jQuery 1.6 及 以 上 版 本 。 
e jQuery UI 1.9.2 一 要求 jQuery 1.6 及 以 上 版 本 。 
点 击 Download 按钮 进行 下 载 ! 
点 击 Download 按钮 ， 完 成 下 载 。 您 将 得 到 一 个 包含 您 所 选 组 件 的 自 定 义 zip 文 


o 


jQuery UI 使 用 


一 旦 您 下 载 了 jQuery UI， 您 将 得 到 一 个 zip 压缩 包 ， 包 含 下 列 文件 : 


/css/ 

/ development -bundle/ 
/js/ 

index.html 


在 网 页 上 使 用 jQuery UI 


在 文本 编辑 器 中 打开 index.html ， 您 将 看 到 引用 了 一 些 外 部 文件 : 主题 、 
jQuery 和 jQuery UI。 通 常情 况 下 ， 您 需要 在 页 面 中 引用 这 三 个 文件 ， 以 便 使 用 
jQuery Ul 的 窗 体 小 部 件 和 交互 部 件 : 


<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" /: 
<script src="js/jquery.min.js"></script> 
«script src="js/jquery-ui.custom.min.js"></script> 
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一 旦 您 引用 了 这 些 必要 的 文件 ， 您 就 能 向 您 的 页 面 添 加 一 些 jQuery 小 部 件 。 比 
如 ， 要 制作 一 个 日 期 选择 器 (datepicker) 小 部 件 ， 您 需要 向 页 面 添加 一 个 文本 输 
入 框 ， 然 后 再 调用 .datepicker() ， 如 下 所 示 : 


HTML: 





<input type="text" name="date" id="date" /> 


JavaScript: 


$( "#date" ).datepicker(); 


Date:| 02/13/2009| | 
o February 2009 o 
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如 需 查看 jQuery Ul 小 部 件 和 交互 部 件 的 实例 演示 ， 请 访问 jQuery UI 实例 。 


jQuery UI 定制 


jQuery Ul 提供 了 多 种 定制 方式 。 您 已 经 看 到 下 载 生 成 器 (Download Builder) 如 何 
定制 一 个 值 包含 您 所 需 选 项 的 自 定 义 版 本 ， 这 里 还 提供 了 其 他 定制 方式 。 


jQuery Ul 基础 : 使 用 选项 


jQuery UI 中 的 每 个 插件 都 有 一 个 默认 配置 ， 默 认 配 置 值 一 般 是 根据 最 基本 最 常见 
的 使 用 情况 设置 的 。 如 果 您 想 要 让 某 个 插件 设置 成 非 默 认 值 ， 您 可 以 使 用 "options" 
重 写 它 的 默认 设置 。 选 项 是 一 组 属性 ， 作 为 参数 传递 给 jQuery UI 小 部 件 。 例 如 ， 
滑 块 (slider) 小 部 件 具 有 orientation 选项 ， 该 选项 允许 您 指定 滑 块 是 水 平 的 还 是 
垂直 的 。 为 了 设置 滑 块 的 该 选项 ， 您 只 需 将 它 作 为 一 个 参数 传递 ， 如 下 所 示 : 


$( "#mySliderDiv" ).slider({ 
orientation: "vertical" 


}); 


您 可 以 传递 更 多 不 同 的 选项 ， 每 个 选项 之 间 用 逗号 分 隔 : 


$( "#mySliderDiv" ).slider({ 
orientation: "vertical", 


min: ©, 

max: 150, 

value: 50 
3): 


请 记得 选项 需 放 在 大 括号 { } 内 。 上 面 的 实例 只 是 一 个 简单 的 讲解 ， 如 需 获 取 整 
= jQuery Ul 小 部 件 的 详细 信息 ， 请 查看 jQuery UI 实例 。 


视觉 定制 : 设计 一 个 jQuery UI 主题 


如 果 您 想 要 设计 自己 的 主题 ，jQuery Ul 提供 了 一 个 非常 完美 的 用 于 主题 定制 的 应 
用 程序 ， 这 就 是 ThemeRoller。 具 体 定制 请 访问 jQuery Ul ThemeRoller。 


ThemeRoller 为 所 有 使 用 jQuery UI 小 部 件 设 计 的 元 素 提供 了 一 个 自 定义 接口 。 当 
您 调整 左 栏 中 的 "levers"， 右 栏 中 的 小 部 件 将 根据 您 的 设计 进行 显示 。ThemeRoller 
的 Gallery 选项 卡 提 供 了 一 些 与 设计 主题 ， 与 下 载 生成 器 (Download Builder) 页 
面 提供 的 一 样 。 您 可 以 基于 这 些 主题 做 调整 ， 或 者 直接 下 载 。 
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下 载 主 题 


当 您 点 击 ThemeRoller 页 面 中 的 "Download theme" 按钮 ， bcd s 
(Download Builder) 页 面 ， 您 的 自 定义 主题 会 在 主体 下 拉 菜单 中 自动 选中 。 您 可 
以 进一步 配置 下 载 包 。 一 旦 下 载 完 成 ， 您 将 看 到 example.html 页 面 使 用 了 您 自 
定义 的 主题 。 


提示 : 如 果 您 需要 编辑 您 的 主题 ， 只 需 打 开 CSS 文件 ， 找 到 第 4347, "To view 
and modify this theme, visit ...", iX url 即 为 在 ThemeRoller 中 打开 主题 进行 编辑 
的 链接 。 


jQuery Ul 工作 原理 


jQuery UI 包含 了 许多 维持 状态 的 小 部 件 (Widget) ， 因 此 ， 它 和 与 典型 的 jQuery 插 
件 使 用 模式 略 有 不 同 。 其 安装 方式 与 大 部 分 jQuery 插件 的 安装 方式 类 似 ，jQuery 
Ul 的 小 部 件 是 基于 部 件 库 (Widget Factory) 创建 的 ， 小 部 件 库 提 供 了 通用 的 
API。 所 以 ， 只 要 您 学 会 使 用 其 中 一 个 ， 您 就 知道 如 何 使 用 其 他 的 小 部 件 

, (Widget) 。 本 教程 籽 通 过 进度 条 (progressbar) 小 部 件 代码 实例 介绍 常见 的 功 
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为 了 跟踪 部 件 的 状态 ， 我 们 首先 介绍 一 下 小 部 件 的 全 生命 周期 。 当 小 部 件 安装 时 ， 
生命 周期 开始 。 我 们 只 需要 在 一 个 或 多 个 元 素 上 调用 插件 ， 即 安装 了 小 部 件 。 


$( "#elem" ).progressbar(); 


这 将 会 初始 化 jQuery 对 象 中 的 每 个 元 素 ， 在 本 例 中 ， 元 素 id 为 "elem", HARI 
调用 无 参数 的 .progressbar() 方法 ， 小 部 件 则 会 按照 它 的 默认 选项 进行 初始 
化 。 我 们 可 以 在 安装 时 传递 一 组 选项 ， 这 样 既 可 重 写 默认 选项 。 


$( "#elem" ).progressbar({ value: 20 }); 
安装 时 传递 的 选项 数目 多 少 可 根据 我 们 的 需要 而 定 。 任 何 我 们 未 传递 的 选项 则 都 使 
用 它们 的 默认 值 。 
选项 是 小 部 件 状态 的 组 成 部 分 ， 所 以 我 们 也 可 以 在 安装 后 再 进行 设置 选项 。 我 们 将 
在 后 续 的 option 方法 中 介绍 这 部 分 内 容 。 
方法 
既然 小 部 件 已 经 初始 化 ， 我 们 就 可 以 查询 它 的 状态 ， 或 者 在 小 部 件 上 执行 动作 。 所 
有 初始 化 后 的 动作 都 以 方法 调用 的 形式 进行 。 为 了 在 小 部 件 上 调用 一 个 方法 ， 我 们 


可 以 向 jQuery 插件 传递 方法 的 名 称 。 人 例如， 为 了 在 进度 条 (progressbar) 小 部 件 
上 调用 value 方法 ， 我 们 应 该 使 用 : 


$( "#elem" ).progressbar( "value" ); 


如 果 方 法 接受 参数 ， 我 们 可 以 在 方法 名 后 传递 参数 。 例 如 ， 为 了 传递 参数 40 给 
value 方法， 我 们 可 以 使 用 : 


$( "#elem" ).progressbar( "value", 40 ); 


就 像 jQuery 中 的 其 他 方法 一 样 ， 大 部 分 的 小 部 件 方 法 为 链接 返回 jQuery 对 象 。 


$( "#elem" ) 
.progressbar( "value", 90 ) 
.addClass( "almost-done" ); 


公共 的 方法 

每 个 小 部 件 都 有 它 自己 的 一 套 基于 小 部 件 所 提供 功能 的 方法 。 然 而 ， 有 一 些 方法 是 
所 有 小 部 件 都 共同 具有 的 。 

option 


正如 我 们 前 面 所 提 到 的 ， 我 们 可 以 在 初始 化 之 后 通过 option 方法 改变 选项 。 例 
如 ， 我 们 可 以 通过 调用 option 方法 改变 progressbar (进度 条 ) 的 value 为 
30。 


$( "#elem" ).progressbar( "option", "value", 30 ); 
请 注意 ， 这 与 之 前 我 们 调用 value 方法 的 实例 有 所 不 同 。 在 本 实例 中 ， 我 们 调用 
option 方法 ， 改 变 value 选项 为 30。 
我 们 也 可 以 为 某 个 选项 获取 当前 的 值 。 


$( "#elem" ).progressbar( "option", "value" ); 


另外 ， 我 们 可 以 通过 给 option 方法 传递 一 个 对 象 ， 一 次 更 新 多 个 选项 。 


$( "#elem" ).progressbar( "option", { 
value: 100, 
disabled: true 


I) 


您 也 许 注 意 到 option 方法 有 着 与 jQuery 代码 中 取 值 器 和 设置 器 相同 的 标志 ， 就 


R .css() 和 .attr() 。 唯 一 的 不 同 就 是 您 必须 传递 字符 串 "option" 作为 第 一 
个 参数 。 


disable 


disable 方法 禁用 小 部 件 。 在 进度 条 (progressbar) 实例 中 ， 这 会 改变 样式 让 
进度 条 显示 为 禁用 状态 。 


$( "#elem" ).progressbar( "disable" ); 


调用 disable 方法 等 同 于 设置 disabled 选项 为 true, 
enable 
enable 方法 是 disable 方法 的 对 立 面 。 


$( "#elem" ).progressbar( "enable" ); 


调用 enable 方法 等 同 于 设置 disabled 选项 为 false. 


destroy 


如 果 您 不 再 需要 小 部 件 ， 那 么 可 以 销毁 它 ， 返 回 到 最 初 的 标记 。 这 意味 着 小 部 件 生 
命 周 期 的 终止 。 


$( "#elem" ).progressbar( "destroy" ); 


一 旦 您 销毁 了 一 个 小 部 件 ， 您 就 不 能 在 该 部 件 上 调用 任何 方法 ， 除 非 您 再 次 初始 化 
这 个 小 部 件 。 如 果 您 要 移 除 元 素 ， 可 以 直接 通过 .remove() ， 也 可 以 通过 
.html() 或 .empty() 修改 祖先 ， 小 部 件 会 自动 销毁 。 


widget 
一 些小 部 件 生成 包装 器 元 素 ， 或 与 原始 元 素 断 开 连 接 的 元 素 。 在 下 面 的 实例 


中 ， widget 将 返回 生成 的 元 素 。 在 进度 条 (progressbar) 实例 中 ， 没 有 生成 的 
包装 器 ， widget 方法 返回 原始 的 元 素 。 


$( "#elem" ).progressbar( "widget" ); 


事件 


所 有 的 小 部 件 都 有 跟 他 们 各 种 行为 相关 的 事件 ， 用 于 在 状态 改变 时 通知 您 。 对 于 大 
多 数 的 小 部 件 ， 当 事件 被 触发 时 ， 名 称 以 小 部 件 名 称 为 前 级 。 例 如 ， 我 们 可 以 绑 定 
进度 条 () 的 change 事件 ， 一 旦 值 发 生变 化 时 就 触发 。 


$( "#elem" ).bind( "progressbarchange", function() { 
alert( "The value has changed!" ); 


3): 


每 个 事件 都 有 一 个 相对 应 的 回调 ， 作 为 选项 进行 呈现 。 我 们 可 以 使 用 进度 条 
(progressbar) BY change 回调 ， 这 等 同 于 绑 定 progressbarchange 事件 。 


$( "#elem" ).progressbar ({ 
change: function() { 
alert( "The value has changed!" ); 


数 事件 是 针对 特定 的 小 部 件 ， 所 有 的 小 部 件 都 有 一 个 公共 的 create 事件 。 
在 小 部 件 被 创建 时 即 被 触发 。 
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jQuery Ul 主题 


jQuery Ul 主题 


所 有 的 jQuery UI 插件 都 允许 开发 人 员 无 缝 集成 UI 小 部 件 到 他 们 网 站 或 应 用 程序 的 
外 观 和 感 观 。 每 个 插件 通过 CSS 定义 样式 ， 且 包含 了 两 层 样 式 信 息 : 标准 的 
jQuery UI CSS 框架 样式 和 具体 的 插件 样式 。 


jQuery UI CSS 框架 提供 了 语义 表示 的 类 ， 用 来 表明 小 部 件 内 元 素 的 角色 ， 比 如 标 
题 、 内 容 或 可 点 击 区 域 。 这 些 在 所 有 的 小 部 件 中 都 是 一 致 的 ， 一 个 可 点 击 的 

tab (标签 页 ) . accordion (Fmi) 或 button. (按钮 ) 都 有 相同 的 
ui-state-default class， 用 来 表明 它们 是 可 点 击 的 。 当 用 户 鼠 标 基 浮 在 这 些 元 
素 上 面 时 ， 这 个 class 就 变 成 ui-state-hover ， 当 选中 这 些 元 素 时 则 变 成 
ui-state-active 。 这 些 class 的 一 致 性 使 得 所 有 部 件 中 具有 相似 角色 或 交互 状 
态 的 元 素 在 外 观 表现 上 一 致 。 


CSS 框架 样式 封装 在 一 个 单独 的 文件 中 ， 名 为 ui.theme.css 。 这 个 文件 时 通过 
ThemeRoller 应 用 程序 来 修改 的 。 框 架 样 式 只 包含 影响 外 观 和 感 观 的 属性 ， 只 要 是 
颜色 、 背 景 图 像 、 图 标 等 。 所 以 这 些 是 "安全 的 " 样式 ， 不 会 影响 到 插件 的 功能 。 这 
种 分 隔 意 味 着 开发 人 员 可 以 通过 在 theme.css 文件 中 修改 颜色 和 图 像 来 创建 一 

个 自 定义 的 外 观 和 感 观 。 由 于 未 来 的 插件 或 者 bug 修复 将 是 可 用 的 ， 这 些 不 通过 修 
改 即 可 与 主题 一 起 使 用 。 


由 于 框架 样式 只 履 盖 了 外 观 和 感 观 ， 所 以 还 需要 包含 具体 的 插件 桩 式 表 ， 这 些 样式 
表 包 括 了 所 有 额外 的 让 小 部 件 具 有 功能 性 的 结构 样式 规则 ， 比 如 尺寸 、 内 边 距 、 外 
边 距 、 定 位 、 浮 动 。 每 个 插件 的 祥 式 表 位 于 themes/base 文件 夹 内 ， 且 配合 插 
件 进行 命名 ， 上 比如 "jquery.ui.accordion.css"。 这 些 样式 必须 认真 编辑 ， 因 为 它们 与 
脚本 一 起 提供 了 框架 样式 的 覆盖 。 


我 们 鼓励 所 有 的 开发 人 员 创建 jQuery 插件 ，jQuery UI CSS 框架 使 得 最 终 用 户 更 容 
易 定制 主题 和 使 用 插件 。 


主题 化 
下 面 列 出 了 三 种 主题 化 jQuery Ul 插件 的 一 般 方 法 : 


。 下 载 ThemeRoller 主题 : 最 早 的 创建 主题 的 方式 是 使 用 ThemeRoller 来 生成 
和 下 载 一 个 主题 。 这 个 应 用 程序 将 创建 一 个 新 的 ui.theme.css 文件 和 一 个 
包含 了 所 有 必需 的 背景 图 像 及 图 标 精 灵 的 images 文件 来 。 这 个 方法 是 最 早 
的 创建 和 维护 主题 的 方式 ， 但 是 它 对 ThemeRoller 中 提供 的 选项 限制 了 自 定 


义 。 

修改 CSS 文件 : 为 了 对 外 观 和 感 观 做 进一步 的 控制 ， 您 可 以 选择 从 默认 主题 
(Smoothness) 开始 ， 或 者 从 一 个 由 ThemeRoller 生成 的 主题 开始 ， 然 后 调 

整 ui.theme.css 文件 ， 或 者 任意 一 个 独立 插件 的 样式 表 。 例 如 ， 您 可 以 很 

容易 地 调整 所 有 按钮 的 角 半 径 为 不 同 于 其 他 UI 组 件 的 值 ， 或 者 使 用 自 定义 设 


时 使 用 多 个 主题 。 为 了 易于 维护 ， 建 议 只 更 改 ui.theme.css 文件 和 图 像 。 
e 重新 编写 自 定义 的 CSS : 为 了 最 大 程度 地 控制 外 观 和 感 观 ， 可 以 重新 开始 编写 


每 个 插件 的 CSS， 而 不 使 用 框架 类 或 者 特定 的 插件 样式 表 。 如 果 想 要 的 外 观 和 
感 观 不 能 通过 修改 CSS 来 实现 或 者 使 用 高 度 自 定义 的 标记 ， 那 么 就 可 以 采用 

o 这 个 方法 要 求 在 CSS 方面 有 深厚 的 专业 知识 ， 且 要 求 手 动 更 新 未 

来 的 插件 。 


使 用 ThemeRoller、jQuery UI CSS 框架 ， 以 及 设计 自 定 义 主 题 


e jQuery Ul ThemeRoller 
e jQuery UI CSS 框架 API 


e 设计 主题 


jQuery UI ThemeRoller 


ThemeRoller 简介 


ThemeRoller 是 一 个 Web 应 用 程序 ， 为 jQuery Ul 设计 和 下 载 自 定 义 主 题 提 供 了 直 
观 的 界面 。 您 可 以 访问 jQuery Ul ThemeRoller 进行 主题 定制 。 


jQuery UI ThemeRoller 是 由 波 士 上 顿 的 Filament Group, Inc 设计 和 开发 的 。 


ThemehRoller 


ThemeRoller 界面 


ThemeRoller 的 界面 分 为 不 同 面板 ， 各 面板 分 别 是 全 局 字体 和 圆 角 半径 设置 、 小 部 
件 容器 样式 、 可 点 击 元 素 的 互动 状态 。 及 覆盖 和 阴影 的 各 种 样式 。 这 些 面板 人 允许 配 
置 各 种 CSS 属性 ， 上 比如 字体 尺寸 、 颜 色 、 粗 细 、 背 景 闫 色 和 和 纹理、 边框 颜色 、 文 
本 颜色 、 图 标 颜色 、 圆 角 半 径 ， 等 等 。 


主题 馆 (Gallery) : 预先 设计 主题 


ThemeRoller 主题 可 以 通过 永久 链接 URL 进行 查看 ， 它 包含 一 些 预 先 设计 的 主题 
可 供 选 择 。 主 题 馆 (Gallery) 可 以 通过 位 于 应 用 程序 界面 顶端 的 标签 栏 进行 访问 。 
从 主题 亿 (Gallery) 中 ， 您 可 以 预览 和 下 载 主题 ， 甚 至 可 以 选择 一 个 主题 ， 然 后 切 
换 到 "Roll Your Own" 标签 页 进行 调整 。 


下 载 主 题 

当 您 设计 完 主 题 后 ， 您 可 以 下 载 主题 以 便 在 项 目 中 进行 使 用 。ThemeRoller 在 顶部 
有 一 个 "Download theme (下 载 主题 )" 按钮 ， 可 以 生成 一 个 zip 压缩 包 ， 包 含 了 
所 有 的 主题 相关 文件 。 下 载 文 件 中 的 图 像 是 按照 您 的 规格 进行 生成 的 ， 并 保存 为 高 
质量 的 PNG 文件 。 

您 的 主题 将 包含 图 像 和 CSS， 组 成 了 jQuery UI CSS 框架 的 自 定 义 版 本 ， 包 含 了 
所 有 插件 的 图 像 和 CSS. 


在 项 目 中 按照 下 载 的 主题 


一 旦 下 载 了 主题 ， 解 压缩 后 ， 您 将 看 到 一 个 名 为 ”themes 的 文件 夹 。 该 文件 夹 包 
括 了 主题 所 需 的 CSS 和 图 像 。 复 制 主题 文件 夹 到 您 的 项 目 中 ， 并 在 页 面 中 链接 
themes/all.css 文件 。 


创建 自 定义 的 "ThemeRoller-Ready" 组 件 


[hemeRoller Ready ThemeRoller Ready 
V jQuery 9 JQuerv TA 





ThemeRoller 生成 了 一 个 jQuery UI CSS 框架 的 自 定义 版 本 ， 用 于 开发 您 自己 的 
ThemeRoller-ready jQuery 组 件 。 通 过 这 个 框架 生成 的 类 被 设计 来 提供 通用 的 用 户 
界面 的 设计 情况 ， 包 括 状态 、 图 标 以 及 各 种 辅助 类 。 


如 需 了 解 更 多 jQuery UI CSS 框架 的 开发 信息 ， 请 查看 主题 化 API 文档 。 
ThemeRoller 链接 
e 教程 : 开发 您 自己 的 jQuery "ThemeRoller-Ready" 组 件 ，Filament Group 


e ThemeRoller 简介 : 设计 & FR jQuery Ul 自 定义 主题 ，Filament Group 
e 视频 : 设计 & 下 载 jQuery Ul 自 定义 主题 ，Filament Group 


jQuery UI CSS 框架 API 


jQuery UI CSS 框架 


jQuery Ul 包含 了 一 个 强大 的 CSS 框架 ， 为 了 创建 自 定义 jQuery 小 部 件 而 设计 
的 。 框 架 包 含 了 通用 的 用 户 界 面 所 需 的 类 ， 且 可 使 用 jQuery Ul ThemeRoller 进行 
维护 。 通 过 使 用 jQuery UI CSS 框架 创建 您 自己 的 UI 组件。 您 需 采 用 共享 标记 公 
约 ， 以 便 在 插件 社区 的 代码 集成 。 


下 面 的 CSS 类 根据 样式 是 否 是 固定 的 结构 化 的 ， 或 者 是 否 是 可 主题 化 的 (颜色 、 
字体 、 背 景 等 ) ， 分 别 定义 在 ui.core.css 和 ui.theme.css 两 个 文件 中 。 
这 些 类 被 设计 来 用 于 用 户 界 面 元 素 ， 以 便 获 得 整个 应 用 程序 的 视觉 一 致 性 ， 可 通过 
jQuery UI ThemeRoller 对 组 件 进行 主题 化 。 


布局 助手 


e .ui-helper-hidden : 对 元 素 应 用 display: none 。 

e .ui-helper-hidden-accessible : 对 元 素 应 用 访问 隐藏 (通过 页 面 绝对 定 
位 ) 。 

e .ui-helper-reset : Ul 元 素 的 基本 样式 重 置 。 重 置 的 元 素 比 
如 : padding 、 margin 、 text-decoration 、list-style， 等 等 。 

e .ui-helper-clearfix : 对 父 元 素 应 用 浮动 包装 属性 。 

e .ui-helper-zfix : 对 &lt;iframe&gt; 元 素 应 用 iframe "fix" CSS, 


小 部 件 容器 


e .ui-widget : 对 所 有 小 部 件 的 外 部 容器 应 用 的 Class。 对 小 部 件 应 用 字体 和 
字体 尺寸 ， 同 时 也 对 自 表单 元 素 应 用 相同 的 字体 和 1em 的 字体 尺寸 ， 以 应 对 
Windows 浏览 器 中 的 继承 问题 。 

e .ui-widget-header : 对 标题 容器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文 
本 、 和 链接、 图 标 应 用 标题 容器 样式 。 

e .ui-widget-content : 对 内 容 容 器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文 
本 、 链 接 、 图 标 应 用 内 容 容器 样式 。 (可 应 用 到 标题 的 父 元 素 或 者 同 级 元 素 ) 


交互 状态 


e .ui-state-default : 对 可 点 击 按钮 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "clickable default" 容器 样式 。 

e .ui-state-hover : 当 鼠 标 基 浮 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 
素 及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 

e .ui-state-focus : 当 键 盘 聚 焦 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 


素 及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 
e .ui-state-active : 当 饭 标点 击 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 素 
及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable active" 容器 样式 。 


交互 提示 Cues 


e .ui-state-highlight : 对 高 完 或 者 选中 元 素 应 用 的 Class。 对 元 素 及 其 子 
元 素 的 文本 、 链 接 、 图 标 应 用 "highlight" 容器 样式 。 

e .ui-state-error : 对 错误 消息 容器 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "error" 容器 样式 。 

e .ui-state-error-text : 对 只 有 无 背景 的 错误 文本 颜色 应 用 的 Class. WI 
用 于 表单 标签 ， 也 可 以 对 子 图 标 应 用 错误 图 标 颜 色 。 

e .ui-state-disabled : 对 禁用 的 UI 元 素 应 用 一 个 暗淡 的 不 透明 度 。 意 味 着 
对 一 个 已 经 定义 样式 的 元 素 添 加 额外 的 样式 。 

e .ui-priority-primary : 对 第 一 优先 权 的 按钮 应 用 的 Class。 应 用 粗 体 文 
本 。 

e .ui-priority-secondary : 对 第 二 优先 权 的 按钮 应 用 的 Class, © AER 
粗细 的 文本 ， 对 元 素 应 用 轻微 的 透明 度 。 


图 标 


状态 和 图 像 


e .ui-icon : 对 图 标 元 素 应 用 的 基本 Class。 设 置 尺 寸 为 16px 方块 ， 隐 藏 内 
部 文本 ， 对 "content" 状态 的 精灵 图 像 设置 背景 图 像 。 注 意 : .ui-icon 
class 将 根据 它 的 父 容 器 得 到 一 个 不 同 的 精灵 背景 图 像 。 例 
Jl, ui-state-default 容器 内 的 ui-icon 元 素 将 根据 
ui-state-default 的 图 标 颜 色 进 行 着 色 。 


图 标 类 型 

在 声明 .ui-icon class 之 后 ， 接 着 您 可 以 声明 一 个 秒 速 图 标 类 型 的 class。 通 常 
情况 下 ， 图 标 class 遵循 语法 

.ui-icon-(icon type}-{icon sub description}-{direction} 。 

例如 ， 一 个 指向 右 侧 的 三 角形 图 标 ， 如 下 所 示 : .ui-icon-triangle-1-e 


jQuery UI 的 ThemeRoller 在 它 的 预览 一 栏 中 提供 了 全 套 的 CSS 框架 图 标 。 将 鼠标 
悬浮 在 图 标 上 可 查看 class 名 称 。 


其 他 视觉 效果 


圆 角 半径 助手 
e .ui-corner-tl : 对 元 素 的 左上 角 应 用 圆 角 半 径 。 


.ui-corner-tr : 对 元 素 的 右上 角 应 用 圆 角 半径 。 
.ui-corner-bl : 对 元 素 的 左下 角 应 用 圆 角 半径 。 
.ui-corner-br : 对 元 素 的 右 下 角 应 用 圆 角 半径 。 
.ui-corner-top : 对 元 素 上 边 的 左右 角 应 用 圆 角 半径 。 
.ui-corner-bottom : 对 元 素 下 边 的 左右 角 应 用 圆 角 半径。 
.ui-corner-right : 对 元 素 右 边 的 上 下 角 应 用 圆 角 半径 。 
.ui-corner-left : 对 元 素 左 边 的 上 下 角 应 用 圆 角 半径 。 
.Ui-corner-all : 对 元 素 的 所 有 四 个 角 应 用 圆 角 半 径 。 


mm & 阴影 


.ui-widget-overlay : tim ht%%FA 100% 宽度 和 高 度 ， 同 时 设置 背景 
颜色 /纹理 和 屏幕 不 透明 度 。 

.ui-widget-shadow : 对 覆盖 应 用 的 Class， 设 置 了 不 透明 度 、 上 偏 移 / 左 偏 
移 ， 以 及 阴影 的 "厚度 "。 厚 度 是 通过 对 阴影 所 有 边 设 置 内 边 距 (padding) 进 
行 应 用 的 。 偏 移 是 通过 设置 上 外 边 距 (margin) 和 左 外 边 距 (margin) 进行 应 
用 的 (可 以 是 正 数 ， 也 可 以 是 负数 ) 。 


jQuery Ul 设计 主题 
文件 结构 


主题 是 以 特定 的 方式 来 增加 他 们 的 易 用 性 。 通 常 ， 文 件 目 录 结 构 如 下 所 示 : 


e themename/ -您 的 主题 必须 完全 包含 在 一 个 单独 的 以 主题 名 称 命 名 的 文件 
夹 内 。 

e themename/themename.css 一 这 是 基本 的 CSS 文件 。 无 论 使 用 了 哪个 插 
件 ， 该 文件 都 必须 在 每 个 使 用 主题 的 页 面 中 引用 。 该 文件 应 该 是 轻 量 级 的 ， 只 
包括 要 点 WO 

e themename/themename.pluginname.css 一 您 支持 的 每 个 插件 都 需要 一 
CSS 文件 。 插件 的 名 称 应 直接 包含 在 文件 名 中 。 例如 ， 如 果 您 为 tabs "e 
页 ) 插件 进行 主题 化 ， 则 有 : themename.tabs.js o 

e themename/img.png 一 您 的 主题 可 以 包含 图 像 。 它 们 可 以 根据 您 的 喜好 进行 
命名 ， 这 里 没有 特定 的 命名 惯例 。 


如 需 了 解 主题 文件 结构 是 如 何 完成 的 实例 ， 请 访问 jQuery Ul 基本 主题 。 
定义 样式 
为 主题 编写 样式 是 非常 简单 的 ， 这 是 因为 主题 的 灵活 性 。 


所 有 的 主题 都 应 该 有 一 个 基本 的 CSS cass, i ^ X IN class 人 允许 用 户 启 用 禁用 
主题 。 您 的 根 class 的 格式 应 该 是 .ui-themename > HE HTML 文件 中 的 用 法 
如 下 所 示 : 


«html» 
«head» 
<title>My Site</title> 
<link rel="stylesheet" href="themename/themename.css" /> 
<link rel="stylesheet" href="othertheme/othertheme.css" /> 
<link rel="stylesheet" href="othertheme/othertheme.dialog.css" 
</head> 
<body class="ui-themename"> 
<div class="ui-othertheme"> 
<div class="ui-dialog">This is a modal dialog.</div> 
</div> 
</body> 
</html> 
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在 上 面 的 实例 中 ， 发 生 了 一 些 重要 的 事情 : 


e 我 们 同时 向 文档 中 加 载 两 个 主题 。 
e 整个 页 面 机 器 所 有 内 容 ， 是 根据 themename 的 祥 式 进行 主题 化 的 。 





e 然而 ， 带 有 ui-othertheme class 的 &lt;div&gt， 及 其 中 的 每 个 元 素 (包括 
模 态 对 话 框 ) 都 是 根据 othertheme 的 样式 进行 主题 化 的 。 


如 果 我 们 打开 themename.css 文件 进行 查看 ， 我 们 可 以 看 到 如 下 代码 : 


body.ui-themename ( background:#111; color:snow; } 
.ui-themename a, a.ui-themename { color:#68D; outline:none; } 
.Ui-themename a:visited, a.ui-themename:visited { color:#D66; } 
.Ui-themename a:hover, a.ui-themename:hover { color:#FFF; } 


请 注意 ， themename ,css 文件 只 包括 全 局 通用 的 样式 信息 ， 特 定 插件 的 样式 信息 
不 在 这 里 进行 定义 。 这 里 的 样式 对 所 有 主题 都 是 适用 的 。 不 用 担心 一 个 主题 会 占据 
多 个 文件 - 这 些 会 在 创建 和 下 载 的 过 程 被 简化 。 


jQuery UI 部 件 库 


jQuery UI 部 件 库 (Widget Factory) 


jQuery UI 部 件 库 (Widget Factory) 是 一 个 可 扩展 的 基础 ， 所 有 的 jQuery UI 小 部 
件 都 是 在 上 面 进行 创建 的 。 使 用 部 件 库 (Widget Factory) 来 创建 插件 ， 提 供 了 方 
便 的 状态 管理 ， 同 时 也 为 一 些 常见 的 任务 提供 了 便捷 ， 上 比如 暴露 插件 方法 ， 实 例 化 
后 改变 选项 等 。 


。 通过 部 件 库 (Widget Factory) 扩展 小 部 件 (Widget) 
e 小 部 件 (Widget) 方法 调用 

e 为 什么 使 用 部 件 库 (Widget Factory) 

e 如 何 使 用 部 件 库 (Widget Factory) 


jQuery U1 通过 部 件 库 (Widget Factory) 扩展 小 
部 件 


jQuery UI 的 部 件 库 (Widget Factory) 使 得 创建 小 部 件 变 得 更 加 容易 ， 这 些小 部 件 
扩展 了 已 有 小 部 件 的 功能 。 这 样子 您 就 能 在 已 有 的 基础 上 创建 出 功能 强大 的 小 部 
件 ， 也 可 以 在 已 有 的 小 部 件 功 能 上 做 细微 的 调整 。 


注意 : 在 学 习 本 章节 之 前 ， 需 要 明白 什么 是 部 件 库 (Widget Factory) ， 及 它 是 怎 
么 工作 的 。 如 果 您 对 这 些 知识 还 不 熟悉 ， 那 么 请 先 查 看 如 何 使 用 部 件 库 (Widget 
Factory) 章节 。 


创建 小 部 件 扩展 


通过 部 件 库 (Widget Factory) 创建 小 部 件 是 通过 向 $.widget() eR 
称 和 一 个 原型 对 象 来 完成 的 。 下 面 的 实例 是 在 "custom" 命名 空间 中 创建 一 
"superDialog" 小 部 件 。 


$.widget( "custom.superDialog", {} ); 


为 了 支持 扩展 ， $.widget() 可 选 性 地 接受 作为 父 部 件 使 用 的 小 部 件 的 构造 画 
数 。 当 指定 一 个 父 部 件 时 ， 把 它 作 为 第 二 个 参数 进行 传递 ， 放 在 小 部 件 名 称 后 面 ， 
在 小 部 件 原型 对 象 前 面 。 


就 像 上 面 的 实例 ， 下 面 也 要 在 "custom" 命名 空间 中 创建 一 个 "superDialog" 小 部 
件 。 但 是 这 次 传递 的 是 jQuery Ul 的 dialog (对 话 框 ) 小 部 件 的 构造 画 数 

( $.ui.dialog ) ， 表 示 superDialog 小 部 件 应 该 使 用 jQuery Ul 的 dialog (对 
话 框 ) 小 部 件 作为 父 部 件 。 


$.widget( "custom.superDialog", $.ui.dialog, {} ); 


在 这 里 ，superDialog 和 dialog 两 个 小 部 件 实质 上 是 等 价 的 ， 只 是 名 称 和 命名 空间 
不 同 而 已 。 为 了 让 我 们 新 的 小 部 件 更 具 特 点 ， 我 们 可 以 添加 一 些 方法 到 它 的 原型 对 
象 上 。 


小 部 件 的 原型 对 象 是 传递 给 $.widget() 的 最 后 一 个 参数 。 到 目前 为 止 ， 我 们 的 
实例 使 用 的 是 一 个 空 的 对 象 。 现 在 让 我 们 给 这 个 对 象 添 加 一 个 方法 : 


$.widget( "custom.superDialog", $.ui.dialog, { 
red: function() { 
this.element.css( "color", "red" ); 
} 
3): 


// Create a new «div», convert it into a superDialog, and call the 
$( "<div>I am red</div>" ) 

. superDialog() 

.superDialog( "red" ); 








现在 superDialog 有 一 个 red() 方法 ， 这 会 把 它 的 文本 颜色 改 为 红色 。 请 注 
m, BRA (Widget Factory) 是 如 何 自动 设置 this 为 小 部 件 的 实例 对 象 。 如 
需 了 解 实例 上 所 有 可 用 的 方法 和 属性 列表 ， 请 访问 GB (Widget Factory) API 
文档 。 


扩展 已 有 的 方法 


有 了 时候， 您 需要 调整 或 添加 已 有 部 件 方法 的 行为 。 您 可 以 把 方法 名 称 指定 为 原型 对 
象 上 需要 重 载 的 方法 名 称 。 下 面 的 实例 重 裁 了 dialog (对 话 框 ) 的 open() A 
法 。 由 于 对 话 框 默 认 是 打开 的 ， 当 运行 这 段 代 码 时 ， "open" 将 会 被 记录 。 


$.widget( "custom.superDialog", $.ui.dialog, { 
open: function() { 
console.log( "open" ); 


3); 


// Create a new «div», and convert it into a superDialog. 
$( "<div>" ).superDialog(); 


当 运 行 这 段 代 码 时 ， 有 一 个 问题 。 由 于 我 们 重 载 了 open() 的 默认 行为 ， 所 以 
dialog (对 话 框 ) 不 再 显示 在 屏幕 上 。 

当 我 们 在 原型 对 象 上 使 用 方法 ， 我 们 实际 上 是 重 载 了 原始 的 方法 ， 在 原型 链 中 使 用 
了 一 个 新 的 方法 。 

为 了 让 父 部 件 方 法 可 用 ， 部 件 库 (Widget Factory) 提供 了 两 个 方法 - _super() 
和 _superApply() o 


使 用 _super() 和 _superApply() 来 访问 父 部 件 


_super() 和  superApply() 在 父 部 件 中 调用 了 同样 的 方法 。 请 看 下 面 的 实 
例 。 就 像 上 一 个 实例 ， 这 个 实例 也 重 载 了 open) 方法 来 记录 "open". Am, 
这 次 运行 _super() 是 调用 了 dialog 〈 对 话 框 ) BY open() ， 并 打开 对 话 框 。 


$.widget( "custom.superDialog", $.ui.dialog, { 
open: function() { 
console.log( "open" ); 


// Invoke the parent widget's open(). 
return this. super(); 


} 
3); 


$( "<div>" ).superDialog(); 


_super() 和  superApply() 实际 上 等 同 于 最 初 的 
Function.prototype.call() 和 Function.prototype.apply() 方法 。 
Itt, _super() 接受 一 个 参数 列表 ， _superApply() 接受 一 个 数组 作为 参数 。 
下 面 的 实例 演示 了 这 二 者 之 间 的 不 同 。 


$.widget( "custom.superDialog", $.ui.dialog, { 
_setOption: function( key, value ) { 


// Both invoke dialog's setOption() method.  super() requi! 
// be passed as an argument list,  superApply() as a single 
this._super( key, value ); 

this. superApply( arguments ); 





重 定义 小 部 件 


jQuery UI 1.9 添加 了 重 定义 小 部 件 的 功能 。 因 此 ， 可 以 不 用 创建 一 个 新 的 小 部 件 ， 
我 们 只 需要 传递 $.widget() 这 样 一 个 已 有 的 小 部 件 名 称 和 构造 画 数 即 可 。 下 面 
的 实例 在 open() 中 添加 了 相同 的 记录 ， 但 不 是 通过 创建 一 个 新 的 小 部 件 来 完成 
的 。 


$.widget( "ui.dialog", $.ui.dialog, { 
open: function() { 
console.log( "open" ); 
return this. super(); 
} 
}); 


$( "<div>" ).dialog(); 


通过 这 个 方法 ， 我 们 可 以 扩展 一 个 已 有 的 小 部 件 方法 ， 但 是 仍然 可 以 使 用 
_super() 来 访问 原始 的 方法 - 这 些 都 不 是 通过 创建 一 个 新 的 小 部 件 来 完成 的 ， 
而 是 直接 重 定义 小 部 件 即 可 。 


小 部 件 (Widgets) 和 多 态 性 (Polymorphism) 


当 在 小 部 件 扩展 及 它们 的 插件 之 间 进 行 交 互 时 候 ， 有 一 点 值得 注意 ， 父 部 件 的 插件 
不 能 用 来 调用 子 部 件 元 素 上 的 方法 。 下 面 的 实例 演示 了 这 一 点 。 


$.widget( "custom.superDialog", $.ui.dialog, {} ); 
var dialog - $( "«div»" ).superDialog(); 


// This works. 
dialog.superDialog( "close" ); 


// This doesn't. 
dialog.dialog( "close" ); 


上 面 的 实例 中 ， 父 部 件 的 插件 ， dialog() ， 不 能 调用 superDialog 元 素 上 的 
close() Aik. 如 需 了 解 更 多 调用 小 部 件 方 法 的 知识 ， 请 查看 小 部 件 
(Widget) 方法 调用 。 


定制 个 性 化 实例 


目前 为 止 ， 我 们 看 到 的 实例 都 有 在 小 部 件 原 型 上 扩展 的 方法 。 在 原型 上 重 载 的 方法 
影响 了 小 部 件 的 所 有 实例 。 


为 了 演示 这 一 点 ， 请 看 下 面 的 实例 。dialog (对 话 框 ) 的 两 个 势力 都 使 用 了 相同 的 
open() 方法 。 


$.widget( "ui.dialog", $.ui.dialog, { 
open: function() { 
console.log( "open" ); 
return this._super(); 
} 
}); 


// Create two dialogs, both use the same open(), therefore "open" : 
$( "<div>" ).dialog(); 
$( "<div>" ).dialog(); 


HJE 
有 时 候 ， 您 只 需要 改变 小 部 件 的 某 个 实例 的 行为 。 为 了 做 到 这 点 ， 您 需要 使 用 正常 


的 JavaScript 属性 分 配 ， 获 得 对 实例 的 引用 ， 并 重 载 该 方法 。 具 体 如 下 面 实例 所 
7JNo 





var dialogInstance = $( "<div>" ) 
. dialog() 
// Retrieve the dialog's instance and store it. 
.data( "ui-dialog" ); 


// Override the close() method for this dialog 
dialogInstance.close = function() { 
console.log( "close" ); 


// Create a second dialog 
$( "<div>" ).dialog(); 


// Select both dialogs and call close() on each of them. 


// "close" will only be logged once. 
$( ":data(ui-dialog)" ).dialog( "close" ); 


个 性 化 实例 的 重 载 方法 技术 是 完美 的 一 次 性 定制 。 


jQuery UI 小 部 件 (Widget) 方法 调用 

小 部 件 (Widget) 是 通过 部 件 库 (Widget Factory) 使 用 方法 来 改变 他 们 初始 化 后 
的 状态 和 执行 动作 而 被 创建 的 。 有 两 种 调用 小 部 件 方法 的 方式 - 通过 部 件 库 
(Widget Factory) 创建 的 插件 ， 或 者 通过 调用 元 素 实 例 对 象 上 的 方法 。 


插件 调用 


使 用 小 部 件 的 插件 调用 方法 ， 把 方法 名 称 以 字符 串 形 式 进行 传递 。 例 如 ， 点 击 这 里 
查看 ， 如 何 调用 dialog (对 话 框 ) 小 部 件 的 close() 方法 。 


$( ".selector" ).dialog( "close" ); 


如 果 方 法 要 求 参 数 ， 请 作为 额外 的 参数 传递 给 插件 。 点 击 这 里 查看 ， 如 何 调用 
dialog (对 话 框 ) 的 option() 方法 。 


$( ".selector" ).dialog( "option", "height" ); 
这 会 返回 dialog (对 话 框 ) 的 height 选项 的 值 。 


实例 调用 

每 个 小 部 件 的 每 个 实例 都 是 使 用 jouery.data() 存储 在 元 素 上 。 为 了 检索 实例 
对 象 ， 请 使 用 小 部 件 的 全 称 作为 键 名 调用 jQuery.data() 。 上 有 具体 如 下 面 实例 所 
7Ivo 


var dialog - $( ".selector" ).data( "ui-dialog" ); 


在 您 引用 实例 对 象 之 后 ， 可 以 直接 在 上 面 调用 方法 。 


var dialog = $( ".selector" ).data( "ui-dialog" ); 
dialog.close(); 


在 jQuery UI 1.11 中 ， 新 的 instance() 方法 会 使 得 这 个 过 程 变 得 更 简单 。 


$( ".selector" ).dialog( "instance" ).close(); 


大 多 数 通 过 小 部 件 的 插件 调用 的 方法 将 返回 一 个 jquery 对 象 ， 所 以 方法 调用 可 
以 通过 额外 的 jQuery 方法 链接 。 当 在 实例 上 进行 调用 时 ， 则 会 返回 
undefined 。 上 有 具体 如 下 面 实例 所 示 。 


var dialog = $( ".selector" ).dialog(); 


// Instance invocation - returns undefined 
dialog.data( "ui-dialog" ).close(); 


// Plugin invocation - returns a jQuery object 
dialog.dialog( "close" ); 


// Therefore, plugin method invocation makes it possible to 
// chain method calls with other jQuery functions 
dialog.dialog( "close" ) 

sess( "color"; “red” ); 


例外 的 是 ， 返 回 小 部 件 相 关 信 息 的 那些 方法 。 例 如 dialog 〈 对 话 框 ) 的 
isOpen() 方法 。 


$( ".selector" ) 
.dialog( "isOpen" ) 
// This will throw a TypeError 
SCS “color, “red” js 


这 会 产生 一 个 TypeError 错误 ， 因 为 isopen() 返回 的 是 一 个 布尔 值 ， 而 不 是 
一 个 jQuery 对 象 。 


jQuery Ul 5; tt FARE (Widget Factory) 


编写 jQuery 插件 与 向 jquery.prototype (通常 显示 为 $.fn ) 添加 方法 一 祥 
简单 ， 且 需要 遵循 一 些 简 单 的 规则 ， 比 如 返回 this 。 所 以 为 什么 会 存在 部 件 库 
(Widget Factory) ? 


在 本 章节 中 ， 我 们 将 讲解 部 件 库 (Widget Factory) 的 好 处 ， 并 了 解 何 时 使 用 它 ， 
以 及 为 什么 要 使 用 它 。 


无 状态 vs. 有 状态 插件 


大 多 数 jQuery 插件 是 无 状态 的 ， 它 们 执行 一 些 动作 即 完成 了 它们 的 任务 。 例 如 ， 
如 果 您 使 用 .text( "hello" ) 设置 元 素 的 文本 ， 没 有 安装 阶段 ， 结 果 都 是 一 样 
的 。 对 于 这 种 类 型 的 插件 ， 它 只 是 扩展 了 jQuery 的 原型 。 


然而 ， 一 些 插件 是 有 状态 的 ， 它 们 有 全 生命 周期 、 维 持 状态 以 及 对 变化 的 反应 。 这 
些 插件 需要 大 量 专门 的 代码 来 初始 化 和 状态 管理 (有 时 是 销毁 ) 。 这 就 导致 出 现 了 
用 于 创建 有 状态 插件 的 模板 。 更 糟糕 的 是 ， 每 个 插件 的 作者 按照 不 同 的 方式 进行 管 
理 插件 的 生命 周期 和 状态 。 这 就 导致 了 不 同 的 插件 有 不 同 的 API 样式 。 部 件 库 
di Factory) 旨 在 解决 这 些 问题 ， 它 移 除 了 模板 ， 并 为 插件 创建 了 一 个 一 致 
J API, 


一 致 的 API 


部 件 库 (Widget Factory) 定义 了 如 何 创 建 和 销毁 小 部 件 ， 获 取 和 设置 选项 ， 调 用 
方法 ， 以 及 监听 小 部 件 触 发 的 事件 。 通 过 使 用 部 件 库 (Widget Factory) 来 创建 有 
状态 的 插件 ， 会 自动 符合 定义 的 标准 ， 让 新 用 户 更 容易 使 用 您 的 插件 。 另 外 ， 部 件 
Æ (Widget Factory) 还 能 实现 定义 接口 的 功能 。 如 果 您 对 部 件 库 (Widget 
Factory) 提供 的 API 还 不 熟悉 ， 请 查看 WABI (Widget Factory) 。 


在 初始 化 时 设置 选项 


当 您 创建 一 个 接受 选项 的 插件 时 ， 您 应 该 为 尽 可 能 多 的 选项 定义 defaults。 然 后 在 
初始 化 时 ， 把 用 户 提供 的 选项 与 defaults 进行 合并 。 您 也 可 以 暴露 defaults， 这 样 
用 户 就 可 以 更 改 默认 值 。 在 jQuery 插件 中 ， 一 个 常用 的 模式 如 下 所 示 : 


$.fn.plugin = function( options ) { 
options = $.extend( {}, $.fn.plugin.defaults, options ); 
// Plugin logic goes here. 
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$.fn.plugin.defaults = { 
parami: "foo", 
param2: "bar", 
param3: "baz" 


HH 


部 件 库 (Widget Factory) 也 提供 了 这 个 功能 ， 并 在 这 上 面 做 了 改进 。 使 用 部 件 库 
(Widget Factory) 之 后 ， 它 将 如 下 所 示 。 


$.widget( "ns.plugin", { 


// Default options. 
options: { 
parami: "foo", 
param2: "bar", 
param3: "baz" 


}, 
_create: function() { 


// Options are already merged and stored in this.options 
// Plugin logic goes here. 


3); 


jQuery UI 如 何 使 用 部 件 库 (Widget Factory) 


我 们 将 创建 一 个 进度 条 。 正 如 下 面 实例 所 示 ， 这 可 以 通过 调用 jQuery .widget() 
来 完成 ， 它 带 有 两 个 参数 : 一 个 是 要 创建 的 插件 名 称 ， 一 个 是 包含 支持 插件 的 函数 
的 对 象 文 字 。 当 插件 被 调用 时 ， 它 将 创建 一 个 新 的 插件 实例 ， 所 有 的 函数 都 将 在 该 
实例 的 语 境 中 被 执行 。 这 与 两 种 重要 方式 的 标准 jQuery 插件 不 同 。 首 先 ， 语 境 是 
一 个 对 象 ， 不 是 DOM 元 素 。 其 次 ， 语 境 总 是 一 个 单一 的 对 象 ， 不 是 一 个 集合 。 


$.widget( "custom.progressbar", { 
_create: function() { 
var progress = this.options.value + "%"; 
this.element 
.addClass( "progressbar" ) 
.text( progress ); 
j 
3); 


插件 的 名 称 必 须 包含 命名 空间 ， 在 这 个 实例 中 ， 我 们 使 用 了 custom 命名 空间 。 
您 只 能 创建 一 层 深 的 命名 空间 ， 因 此 ， custom.progressbar 是 一 个 有 效 的 插件 
名 称 ， 而 very.custom.progressbar 不 是 一 个 有 效 的 插件 名 称 。 


我 们 看 到 部 件 库 (Widget Factory) 为 我 们 提供 了 两 个 属性 。 this.element = 
一 个 包含 一 个 元 素 的 jQuery 对 象 。 如 果 我 们 的 插件 在 包含 多 个 元 素 的 jQuery 对 象 
上 调用 ， 则 会 为 每 个 元 素 创建 一 个 单独 的 插件 实例 ， 且 每 个 实例 都 会 有 自己 的 
this.element 。 第 二 个 属性 ， this.options ， 是 一 个 包含 所 有 插件 选项 的 键 
名 / 键 值 对 的 哈 希 (hash) 。 这 些 选项 可 以 被 传 给 插件 ， 如 下 所 示 : 


$( "<div></div>" ) 
.appendTo( "body" ) 
.progressbar(( value: 20 }); 


当 我 们 调用 jQuery.widget() ， 它 通过 给 jQuery.fn (用 于 创建 标准 插件 的 

系统 ) 添加 函数 来 扩展 jQuery。 所 添加 的 函数 名 称 是 基于 您 传 给 

jQuery .widget() 的 名 称 ， 不 带 命 名 空间 - "progressbar"。 传 给 插件 的 选项 是 在 
插件 实例 中 获取 设置 的 值 。 如 下 面 的 实例 所 示 ， 我 们 可 以 为 任意 一 个 选项 指定 默认 
值 。 当 设计 您 的 API 时 ， 您 应 该 清楚 你 的 插件 的 最 常见 的 使 用 情况 ， 以 便 您 可 以 设 
转 适 当 的 默认 值 ， 且 确保 使 所 有 的 选项 真正 可 选 。 


$.widget( "custom.progressbar", { 


// Default options. 
options: { 
value: 0 
}, 
_create: function() { 
var progress = this.options.value + "96"; 
this.element 
.addClass( "progressbar" ) 
.text( progress ); 
} 
Py 


调用 插件 方法 
现在 我 们 可 以 初始 化 我 们 的 进度 条 ， 我 们 将 通过 在 插件 实例 上 调用 方法 来 执行 动 


作 。 为 了 定义 一 个 插件 方法 ， 我 们 只 在 我 们 传 给 jQuery .widget() 的 对 象 中 引 
用 函数 。 我 们 也 可 以 通过 给 函数 名 加 下 划 线 前 级 来 定义 "private" 方法 。 


$.widget( "custom.progressbar", { 


options: { 
value: 0 


ty 


_create: function() { 
var progress = this.options.value + "%"; 
this.element 
.addClass( "progressbar" ) 
.text( progress ); 


ty 


// Create a public method. 
value: function( value ) { 


// No value passed, act as a getter. 
if ( value === undefined ) { 

return this.options.value; 
j 


// Nalue passed, act as a setter. 
this.options.value - this. constrain( value ); 
var progress = this.options.value + "%"; 
this.element.text( progress ); 


ty 


// Create a private method. 
_constrain: function( value ) { 
if ( value > 100 ) { 
value = 100; 


} 
if ( value < © ) { 
value = 0; 


return value; 


} 
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为 了 在 插件 实例 上 调用 方法 ， 您 可 以 向 jQuery 插件 传递 方法 的 名 称 。 如 果 您 调用 
的 方法 接受 参数 ， 您 只 需 简单 地 在 方法 名 后 面 传递 这 些 参 数 即 可 。 


注意 : 通过 向 同一 个 用 于 初始 化 插件 的 jQuery 男 数 传递 方法 名 来 执行 方法 。 这 样 
做 是 为 了 在 保持 链 方 法 调用 时 防止 jQuery 命名 空间 污染 。 在 本 章节 的 后 续 ， 我 们 
将 看 到 看 起 来 更 自然 的 其 他 用 法 。 


var bar = $( "<div></div>" ) 
.appendTo( "body" ) 
.progressbar(( value: 20 }); 


// Get the current value. 
alert( bar.progressbar( "value" ) ); 


// Update the value. 
bar.progressbar( "value", 50 ); 


// Get the current value again. 
alert( bar.progressbar( "value" ) ); 


使 用 选项 


option() 方法 是 自动 提供 给 插件 的 。 option() 方法 允许 您 在 初始 化 后 获取 并 
设置 选项 。 该 方法 像 jQuery 的 .css() 和 .attr() 方法 : 您 可 以 只 传递 一 个 
名 称 作为 取 值 器 来 使 用 ， 也 可 以 传递 一 个 名 称 和 值 作 为 设置 器 使 用 ， 或 者 传递 一 个 
键 名 / 键 值 对 的 哈 希 来 设置 多 个 值 。 当 作为 取 值 器 使 用 时 ， 揪 件 将 返回 与 传人 名 称 相 
对 应 的 选项 的 当前 值 。 当 作为 设置 器 使 用 时 ， 插 件 的 _setoption 方法 将 被 每 个 
被 设置 的 选项 调用 。 我 们 可 以 在 我 们 的 插件 中 指定 一 个 _setoption 方法 来 反应 
选项 更 改 。 对 于 更 改选 项 要 独立 执行 的 动作 ， 我 们 可 以 重 载 _setOptions o 


$.widget( "custom.progressbar", { 
options: { 
value: 0 


_create: function() { 
this.options.value = this. constrain(this.options.value); 
this.element.addClass( "progressbar" ); 
this.refresh(); 


tr 
_setOption: function( key, value ) { 
if ( key === "value" ) { 
value = this._constrain( value ); 
} 
this._super( key, value ); 
tr 


_setOptions: function( options ) { 
this. super( options ); 
this.refresh(); 

3 

refresh: function() ( 
var progress = this.options.value + "96"; 
this.element.text( progress ); 

3 

_constrain: function( value ) { 
if ( value > 100 ) { 

value - 100; 


} 
if ( value < © ) { 
value = 0; 


return value; 


添加 回调 


最 简单 的 扩展 插件 的 方法 是 添加 回调 ， 这 样 用 户 就 可 以 在 插件 状态 发 生变 化 时 做 出 
反应 。 我 们 可 以 看 下 面 的 实例 如 何在 进度 达到 10096 时 添加 回调 到 进度 

条  trigger() 方法 有 三 个 参数 : 回调 名 称 ， 一 个 启动 回调 的 jQuery 事件 对 
象 ， 以 及 一 个 与 事件 相关 的 数据 哈 希 。 回 调 名 称 是 唯一 一 个 必需 的 参数 ， 但 是 对 于 
想 要 在 插件 上 实现 自 定义 功能 的 用 户 ， 其 他 的 参数 是 非常 有 用 的 。 例 如 ， 如 果 我 们 
创建 一 个 可 拖 搜 插件 ， 我 们 可 以 在 触发 拖 搜 回调 时 传递 mousemove 事件 ， 这 将 允 
许 用 户 对 基于 由 事件 对 象 提供 的 x/y 坐标 上 的 拖 搜 做 出 反应 。 请 注意 ， 传 递 到 
_trigger() 的 原始 的 事件 必须 是 一 个 jQuery 事件 ， 而 不 是 一 个 原生 的 浏览 器 事 
件 。 


$.widget( "custom.progressbar", { 
options: { 
value: 0 


_create: function() { 
this.options.value = this. constrain(this.options.value); 
this.element.addClass( "progressbar" ); 
this.refresh(); 


tr 
_setOption: function( key, value ) { 
if ( key === "value" ) { 
value = this._constrain( value ); 
} 
this._super( key, value ); 
tr 


_setOptions: function( options ) { 
this. super( options ); 
this.refresh(); 
ty 
refresh: function() { 
var progress = this.options.value + "%"; 
this.element.text( progress ); 
if ( this.options.value == 100 ) { 
this._trigger( "complete", null, { value: 100 } ); 
} 


tr 
_constrain: function( value ) { 
if ( value > 100 ) { 
value = 100; 


} 

if ( value < © ) { 
value = 0; 

} 


return value; 
} 
3): 


EE s uf 


回调 函数 本 质 上 只 是 附加 选项 ， 所 以 您 可 以 像 其 他 选项 一 样 获取 并 设置 它们 。 无 论 
何 时 执行 回调 ， 都 会 有 一 个 相对 应 的 事件 被 触发 。 事 件 类 型 是 通过 连接 插件 的 名 称 
和 回调 函数 名 称 确定 的 。 回 调和 事件 都 接受 两 个 相同 的 参数 : 一 个 事件 对 象 和 一 个 
与 事件 相关 的 数据 哈 希 ， 具 体 如 下 面 实例 所 示 。 您 的 插件 可 能 需要 包含 防止 用 户 使 
用 的 功能 ， 为 了 做 到 这 点 ， 最 好 的 方法 就 是 创建 爱 你 可 撤销 的 回调 。 用 户 可 以 撤销 
回调 或 者 相关 的 事件 ， 与 他 们 撤销 任何 一 个 原生 事件 一 样 ， 都 是 通过 调用 
event.preventDefault() 或 返回 false 来 实现 的 。 如 果 用 户 撤销 回 

ijj,  trigger() 方法 将 返回 false ， 这 样 您 就 能 在 插件 内 实现 合适 的 功能 。 


var bar = $( "<div></div>" ) 
.appendTo( "body" ) 
.progressbar(1 
complete: function( event, data ) ( 
alert( "Callbacks are great!" ); 
} 


}) 

.bind( "progressbarcomplete", function( event, data ) { 
alert( "Events bubble and support many handlers for extreme 
alert( "The progress bar value is " + data.value ); 


3); 


bar.progressbar( "option", "value", 100 ); 





现在 我 们 已 经 看 到 如 何 使 用 部 件 库 (Widget Factory) 创建 一 个 插件 ， 接 下 来 让 我 
们 看 看 它 实际 上 是 如 何 工 作 的 。 当 您 调用 jQuery.widget() 时 ， 它 将 为 插件 创 
建 一 个 构造 画 数 ， 并 设置 您 为 插件 实例 传 入 的 作为 原型 的 对 象 。 所 有 自动 添加 到 插 
件 的 功能 都 来 自 一 个 基本 的 小 部 件 原 型 ， 该 原型 定义 为 
jQuery.Widget.prototype 。 当 创建 插件 实例 时 ， 会 使 用 jQuery.data 把 它 
存储 在 原始 的 DOM 元 素 上 ， 插 件 名 作为 键 名 。 


由 于 插件 实例 直接 链接 到 DOM 元 素 上 ， 您 可 以 直接 访问 插件 实例 ， 而 不 需要 通 历 
插件 方法 。 这 将 人 允许 您 直接 在 插件 实例 上 调用 方法 ， 而 不 需要 传递 字符 串 形 式 的 方 
法 名 ， 同 时 您 也 可 以 直接 访问 插件 的 属性 。 


var bar = $( "<div></div>" ) 
.appendTo( "body" ) 
.progressbar() 
.data( "progressbar" ); 


// Call a method directly on the plugin instance. 
bar.option( "value", 50 ); 


// Access properties on the plugin instance. 


alert( bar.options.value ); 


sue m 不 通 历 插件 方法 的 情况 下 创建 一 个 实例 ， 通 过 选项 和 元 素 直 接 调 用 构造 
ER 2 BD By 


var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "I 


// Same result as before. 
alert( bar.options.value ); 


«| 


扩展 插件 的 原型 


插件 有 构造 画 数 和 原型 的 最 大 好 处 是 易于 扩展 插件 。 Bu c 
方法 ， 我 们 可 以 修改 插件 所 有 实例 的 行为 。 例 如 ， 如 果 我 们 想 要 向 进度 条 添加 一 
方法 来 重 置 进度 为 0%， 我 们 可 以 向 原型 添加 这 个 方法 ， 它 将 在 所 有 插件 实例 上 可 
调用 。 








$.custom.progressbar.prototype.reset = function() { 
this. setOption( "value", © ); 


如 需 了 解 扩 展 小 部 件 的 更 多 细 以 及 如 何在 一 个 已 有 的 小 部 件 上 创建 一 个 全 新 的 
小 部 件 的 更 多 细节 ， 请 查看 通过 部 件 库 (Widget Factory) 扩展 小 部 件 

(Widget) 。 

清理 


在 某 些 情况 下 ， 人 允许 用 户 应 用 插件 ， 然 后 再 取消 应用。 您 可 以 通过 _destroy() 
方法 做 到 这 一 点 。 在 _destroy() 方法 内 ， 您 点 该 撤销 在 初始 化 和 后 期 使 用 期 间 
插件 所 做 的 一 切 动作 。  destroy() 是 通过 .destroy() 方法 被 调用 

BY, .destroy() 方法 是 在 插件 实例 绑 定 的 元 素 从 DOM 
的 ， 所 以 这 可 被 用 于 垃圾 回收 。 基 本 的 .destroy() 方法 也 义理 一 些 常用 的 清 
操作 ， 上 比如 从 小 部 件 的 DOM 元 素 上 移 除 实例 引用 ， ee 
空间 中 的 所 有 事件 ， 解 除 绑 定 所 有 使 用 _bind() 添加 的 事件 。 


$.widget( "custom.progressbar", { 
options: { 
value: 0 


_create: function() { 
this.options.value = this. constrain(this.options.value); 
this.element.addClass( "progressbar" ); 
this.refresh(); 


tr 
_setOption: function( key, value ) { 
if ( key === "value" ) { 
value = this._constrain( value ); 
} 
this._super( key, value ); 
tr 


_setOptions: function( options ) { 
this. super( options ); 
this.refresh(); 

}, 

refresh: function() { 
var progress = this.options.value + "%"; 
this.element.text( progress ); 
if ( this.options.value == 100 ) { 

this._trigger( "complete", null, { value: 100 } ); 

} 

}, 


_constrain: function( value ) { 
if ( value > 100 ) { 
value = 100; 


} 

if ( value < 0 ) { 
value = 0; 

} 


return value; 


ty 


_destroy: function() { 
this.element 
.removeClass( "progressbar" ) 
.text( "" ); 


关闭 注释 


部 件 库 (Widget Factory) 只 是 创建 有 状态 插件 的 一 种 方式 。 这 里 还 有 一 些 其 他 不 
同 的 模型 可 以 使 用 ， 且 每 个 都 有 各 自 的 优势 和 劣势 。 部 件 库 (Widget Factory) f& 
决 了 很 多 常见 的 问题 ， 且 大 大 提高 了 效率 ， 同 时 也 大 大 提高 了 代码 的 重用 性 ， 使 它 
适合 于 jQuery Ul 及 其 他 有 状态 的 插件 。 


请 注意 ， 在 本 章节 中 我 们 使 用 了 custom 命名 空间 。 ui 命名 空 > 
jQuery Ul 插件 保留 。 当 创建 您 自己 的 插件 时 ， 您 应 该 创建 自己 的 命名 空间 。 这 
才能 ea Eo, 属于 哪个 范围 。 


jQuery UI 实例 


jQuery UI 实例 


jQuery Ul 提供 了 一 组 用 户 界面 交互 、 特 效 、 小 部 件 、 实 用 工具 及 主题 。 通 过 实例 
An ARRA AEEA, HAPI 文档 ， 开 始 学 习 使 用 jQuery Ul. 


交互 (Interactions) 


交互 (Interactions) 向 任何 元 素 添 加 基本 的 基于 鼠标 的 行为 。 您 可 以 只 通过 短 短 的 
几 行 代码 即 可 创建 排序 列表 、 缩 放 元 素 、 拖 放行 为 等 等 。 交 互 (Interactions) 也 作 
用 于 更 复杂 的 小 部 件 和 应 用 程序 。 


拖 动 (Draggable) 
放置 (Droppable) 
缩放 (Resizable) 
选择 (Selectable) 
排序 (Sortable) 


小 部 件 (Widgets) 


小 部 件 (Widgets) 有 功能 齐全 的 UI 控件 ， 使 桌面 应 用 程序 也 具备 Web 应 用 程序 
一 样 丰富 的 功能 。 所 有 的 小 部 件 (Widgets) 提供 了 一 个 核心 ， 带 有 定制 行为 的 大 
量 扩展 以 及 完整 的 主题 支持 。 


e iré (Accordion) 
自动 完成 (Autocomplete) 
按钮 (Button) 
日 期 选择 器 (Datepicker) 
对 话 框 (Dialog) 

菜单 (Menu) 

进度 条 (Progressbar) 
滑 块 (Slider) 

旋转 器 (Spinner) 
标签 页 (Tabs) 

工具 提示 框 (Tooltip) 


特效 (Effects) 


特效 (Effects) 支持 颜色 动画 和 Class 转换 ， 同 时 也 提供 了 一 些 额 外 的 Easings。 
2 供 显 示 和 隐藏 元 素 时 或 者 只 是 添加 一 些 视觉 显 
示 时 使 用 。 


e 特效 (Effect) 
e FA WM (Visibility) 
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o 显示 (Show) 
o 隐藏 (Hide) 
o 切换 (Toggle) 
e Class 动画 (Class Animation) 
o 添加 Class (Add Class) 
o 移 除 Class (Remove Class) 
o 切换 Class (Toggle Class) 
o 转换 Class (Switch Class) 
e 颜色 动画 (Color Animation) 


实用 工具 (Utilities) 


jQuery Ul 使 用 实体 工具 (Utilities) 来 创建 交互 (interactions) 和 小 部 件 
(widgets) 。 


e 定位 (Position) 
e 部 件 库 (Widget Factory) 


jQuery UI 实例 


jQuery UI 实例 - 拖 动 (Draggable) 


允许 使 用 鼠标 移动 元 素 。 


如 需 了 解 更 多 有 关 draggable 交互 的 细节 ， 请 查看 API 文档 可 拖 搜 小 部 件 
(Draggable Widget) 。 


默认 功能 


在 任意 的 DOM 元 素 上 启用 draggable 功能 。 通 过 最 标点 击 并 在 视 区 中 拖 动 来 移动 
draggable 对 象 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI #84 (Draggable) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable { width: 150px; height: 150px; padding: 0.5em; } 
</style> 
<script> 
$(function() { 

$( "#draggable" ).draggable(); 

+); 
</script> 

</head> 

<body> 


<div id="draggable" class="ui-widget -content"> 
<p> 请 拖 动 我 1 </p> 
</div> 


</body> 
</html> 
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自动 滚动 


当 draggable 移动 到 视 区 外 时 自动 滚动 文档 。 设 置 scroll 选项 为 true 来 启用 自 
动 滚动 ， 当 滚动 触发 时 进行 微调 ， 滚 动 速度 是 通过 scrollSensitivity 和 
scrollSpeed 选项 设置 的 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 自动 滚动 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2, #draggable3 { width: 100px; height: 100; 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ scroll: true }); 
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity 
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 ` 
3); 
«/script» 
«/head» 
«body» 


«div id="draggable" class="ui-widget-content"> 
<p>Scroll 设置 为 true， 默 认 设置 </p> 
</div> 


«div id="draggable2" class="ui-widget-content"> 
<p>scrollSensitivity 设置 为 100</p> 
</div> 


«div id="draggable3" class="ui-widget-content"> 
<p>scrollSpeed 设置 为 100</p> 
</div> 


<div style="height: 5000px; width: 1px;"></div> 


</body> 
</html> 
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约束 运动 


通过 定义 draggable 区 域 的 边界 来 约束 每 个 draggable 的 运动 。 设 置 axis 选项 
来 限制 draggable 的 路 径 为 x 轴 或 者 y 轴 ， 或 者 使 用 containment 选项 来 指定 
一 个 父 级 的 DOM 元 素 或 者 一 个 jQuery 选择 器 ， 比 如 'document.'. 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>jQuery UI #8 (Draggable) - 约束 运动 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.draggable { width: 90px; height: 90px; padding: 0.5em; float: le 
#draggable, #draggable2 { margin-bottom:20px; } 
#draggable { cursor: n-resize; } 
#draggable2 { cursor: e-resize; } 
#containment-wrapper { width: 95%; height:150px; border:2px solic 
h3 { clear: left; } 
</style> 
<script> 
$(function() { 

$( "#draggable" ).draggable({ axis: "y" }); 

$( "#draggable2" ).draggable({ axis: "x" }); 


$( "#draggable3" ).draggable({ containment: "#containment -wrapy; 
$( "#draggable5" ).draggable({ containment: "parent" }); 


</script> 
</head> 
<body> 


<h3> 治 着 轴 约 束 运 动 : </h3> 


<div id="draggable" class="draggable ui-widget-content"> 
<p> 只 能 垂直 抑 搜 </p> 
</div> 


<div id="draggable2" class="draggable ui-widget-content"> 
<p> 只 能 水 平 拖 搜 </p> 
</div> 


<h3> 或 者 在 另 一 个 DOM 元 素 中 约束 运动 : </h3> 
«div id="containment -wrapper"> 
<div id="draggable3" class="draggable ui-widget-content"> 
<p> 我 被 约束 在 盒子 里 </p> 
</div> 


<div class="draggable ui-widget-content"> 
<p id="draggable5" class="ui-widget-header"> 我 被 约束 在 父 元 素 内 </p: 
</div> 
</div> 


</body> 
</html> 








光标 样式 


当 拖 搜 对 象 时 定位 光标 。 默 认 情 况 下 ， 光 标 是 出 现在 被 拖 搜 对 象 的 中 间 。 使 用 
cursorAt 选项 来 指定 相对 于 draggable 的 另 一 个 位 置 (指定 一 个 相对 于 top. 
right, bottom, left 的 像素 值 )。 通 过 提供 一 个 带 有 有 效 的 CSS 光标 值 的 
cursor 选项 ， 来 自 定义 光标 的 外 观 。 有 效 的 CSS 光标 值 包括 : default, 
move、pointer、crosshair， 等 等 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI $&zj (Draggable) - 光标 样式 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2, #draggable3 { width: 100px; height: 100; 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 
$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: : 
$( "#draggable3" ).draggable({ cursorAt: { bottom: © } }); 
3); 
«/script» 
«/head» 
«body» 


«div id="draggable" class="ui-widget-content"> 
<prk Xe (xt ERAS) </p> 
</div> 


«div id="draggable2" class="ui-widget-content"> 
<p> 我 的 光标 是 在 left -5 和 top -5</p> 
</div> 


<div id="draggable3" class="ui-widget-content"> 
<p> 我 的 光标 位 置 只 控制 了 'bottom' 值 </p> 
</div> 


</body> 
</html> 
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延迟 开始 





通过 delay 选项 设置 延迟 开始 拖 搜 的 毫秒 数 。 通 过 distance 选项 设置 光标 被 
按 下 且 拖 搜 指定 像素 后 才 人 允许 拖 搜 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 延迟 开始 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 120px; height: 120px; padding: ( 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ distance: 20 }); 
$( "#draggable2" ).draggable({ delay: 1000 }); 
$( ".ui-draggable" ).disableSelection(); 
3); 
«/script» 
«/head» 
«body» 


«div id="draggable" class="ui-widget-content"> 
<p> 只 有 把 我 拖 搜 了 20 像素 后 ， 拖 搜 才 开始 </p> 


</div> 
«div id="draggable2" class="ui-widget-content"> 

<p> distance 是 多 少 ， 您 都 必须 拖 搜 并 等 待 1000ms 后 拖 搜 才 开 始 </p> 
</div> 


</body> 
</html> 
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事件 


draggable 上 的 start 、 drag 和 stop 事件 。 拖 搜 开 始 时 触发 start 事 
件 ， 拖 搜 期 间 触 发 drag 事件 ， 拖 搜 停 止 时 触发 stop 事件 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI ### (Draggable) - 事件 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 


«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable { width: 16em; padding: 0 1em; } 
#draggable ul li { margin: 1em 0; padding: ©.5em 0; } * html #dré 
#draggable ul li span.ui-icon { float: left; } 
#draggable ul li span.count { font-weight: bold; } 
</style> 
<script> 
$(function() { 
var $start_counter = $( "#event-start" ), 

$drag_counter = $( "#event-drag" ), 

$stop_counter = $( "#event-stop" ), 

counts = [ 0, 0, O ]; 


$( "#draggable" ).draggable({ 
start: function() { 
counts[ © J++; 
updateCounterStatus( $start_counter, counts[ 0 ] ); 
}, 
drag: function() ( 
counts[ 1 ]++; 
updateCounterStatus( $drag counter, counts[ 1 ] ); 
}, 
stop: function() { 
counts[ 2 ]++; 
updateCounterStatus( $stop_counter, counts[ 2 ] ); 
} 
3); 


function updateCounterStatus( $event counter, new count ) ( 
// 首先 更 新 视觉 状态 ... 
if ( !$event_counter.hasClass( "ui-state-hover" ) ) { 
$event counter.addClass( "ui-state-hover" ) 
.siblings().removeClass( "ui-state-hover" ); 


} 
// .. .然后 更 新 数字 
$( "span.count", $event_counter ).text( new count ); 
} 
}); 
</script> 
</head> 
<body> 


<div id="draggable" class="ui-widget ui-widget-content"> 
<p> 请 拖 搜 我 ， 触 发 一 连 串 的 事件 。</p> 


<ul class="ui-helper-reset"> 
«li id="event-start" class="ui-state-default ui-corner-all'"»«s[ 
<li id="event-drag" class="ui-state-default ui-corner-all"><spz 
«li id="event-stop" class="ui-state-default ui-corner-all"><spz 
</ul> 


</div> 


</body> 
</html> 
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Handles 


只 有 当 光 标 在 draggable LEERD F irt. (EAA handle 选项 来 指定 用 
于 拖 搜 对 象 的 元 素 (或 元 素 组 ) 的 jQuery 选择 器 。 

Or prevent dragging when the cursor is over a specific element (or group of 
elements) within the draggable. Use the cancel option to specify a jQuery selector 
over which to "cancel" draggable functionality. 


或 者 当 光 标 在 draggable 内 指定 元 素 (或 元 素 组 ) 上 时 不 允许 拖 搜 。 使 用 
handle 选项 来 指定 取消 拖 搜 功能 的 jQuery 选择 器 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - Handles</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 100px; height: 100px; padding: ( 
#draggable p { cursor: move; } 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ handle: "p" }); 
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" }), 
$( "div, p" ).disableSelection(); 
3); 
</script> 
</head> 
<body> 


<div id="draggable" class="ui-widget-content"> 
<p class="ui-widget-header"> 您 只 可 以 在 这 个 范围 内 拖 搜 我 </p> 
</div> 


<div id="draggable2" class="ui-widget-content"> 

<p> 您 可 以 把 我 向 四 周 拖 搜 &hellip;</p> 

<p class="ui-widget-header">&hellip; 但 是 您 不 可 以 在 这 个 范围 内 拖 搜 我 </p: 
</div> 


</body> 
</html> 





当 带 有 布尔 值 revert 选项 的 draggable 停止 拖 搜 时 ， 返 回 draggable (或 它 的 
助手 ) 到 原始 位 置 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI #8 (Draggable) - 还 原 位 置 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 100px; height: 100px; padding: ( 
</style> 
<script> 
$(function() { 

$( "#draggable" ).draggable({ revert: true }); 
$( "#draggable2" ).draggable({ revert: true, helper: "clone" Y. 

3); 
«/script» 

</head> 

<body> 


«div id="draggable" class="ui-widget-content"> 
<p> 还 原 </p> 
</div> 


«div id="draggable2" class="ui-widget-content"> 
<p> 还 原 助手 </p> 
</div> 


</body> 
</html> 
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xt # draggable 到 DOM 元 素 的 内 部 或 外 部 边界 。 使 用 
snap 、 snapMode (inner, outer, both) 和 snapTolerance ( 当 调 用 对 齐 时 ， 
draggable 与 元 素 之 间 的 距离 ， 以 像素 为 单位 ) 选项 。 


或 者 对 齐 draggable 到 网 格 。 通 过 grid 选项 设置 网 格 单元 的 尺寸 (以 像素 为 单 
位 的 高 度 或 宽 度 ) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 对 齐 到 元 素 或 网 格 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 


«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.draggable { width: 90px; height: 80px; padding: 5px; float: lefi 
.ui-widget-header p, .ui-widget-content p ( margin: 0; } 
#snaptarget { height: 140px; } 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ snap: true }); 
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); 
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snap! 
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] }); 
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); 


</script> 
</head> 
<body> 


«div id="snaptarget" class="ui-widget -header"> 
<p> 我 是 对 齐 目标 </p> 
</div> 


<br style="clear:both"> 


<div id="draggable" x OL ui-widget-content"- 
<p> 默 认 (snap: true) ， 对 齐 到 所 有 其 他 的 draggable 元 素 </p> 
</div> 


<div E class="draggable ui-widget-content"> 
<p> 我 只 对 齐 到 大 盒子 </p> 
</div> 


<div x ed class-"draggable ui-widget-content"> 
<p> 我 只 对 齐 到 大 盒子 的 外 边缘 </p> 


</div> 


«div id="draggable4" class="draggable ui-widget-content"> 
<p> 我 对 齐 到 一 个 20 x 20 网 格 </p> 
</div> 


<div id="draggable5" class="draggable ui-widget-content"> 
<p> 我 对 齐 到 一 个 80 x 80 网 格 </p> 
</div> 


</body> 
</html> 





给 用 户 提供 反馈 ， 就 像 以 助手 方式 拖 搜 对 象 一 样 。 helper 选项 接受 值 
‘original’ (用 光标 移动 draggable 对 象 ) 'clone' (用 光标 移动 draggable 的 副 
A) ， 或 者 一 个 返回 DOM 元 素 的 函数 〈 该 元 素 在 拖 搜 期 间 显 示 在 光标 附近 ) 。 通 
过 opacity 选项 控制 助手 的 透明 度 。 


为 了 区 别 哪 一 个 draggable 正在 被 拖 搜 ， 让 在 运动 中 的 draggable 保持 最 前 。 如 果 
正在 拖 搜 ， 使 用 zIndex 选项 来 设置 助手 的 高 度 z-index， 或 者 使 用 stack 选 
项 来 确保 当 停止 拖 搜 时 ， 最 后 一 个 被 拖 搜 的 项 目 总 是 出 现在 同 组 其 他 项 目的 上 面 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) - 视觉 反馈 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2, #draggable3, #set div { width: 90px; he: 
#draggable, #draggable2, #draggable3 { margin-bottom: 20px; } 
#set { clear:both; float:left; width: 368px; height: 120px; } 
p { clear:both; margin:0; padding:1em 0; } 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ helper: "original" }); 
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" } 
$( "#draggable3" ).draggable({ 
cursor: "move", 
cursorAt: { top: -12, left: -20 }, 
helper: function( event ) { 
return $( "<div class='ui-widget-header'>I'm a custom help: 


3); 
$( "#set div" ).draggable({ stack: "#set div" }); 
3); 


</script> 
</head> 
<body> 


<h3 class="docs">B)# : </h3> 

«div id="draggable" class="ui-widget-content"> 
<p> 原 始 的 </p> 

</div> 

«div id="draggable2" class="ui-widget-content"> 
<p> 半 透明 的 克隆 </p> 


</div> 


«div id="draggable3" class="ui-widget-content"> 


<p> 自 定义 助手 (与 cursorAt 结合 ) </p> 
</div> 


«h3 class-"docs"»3É & : </h3> 
«div id="set"> 
«div class="ui-widget-content"> 
<p> 我 们 是 draggables..«/p» 
</div> 


«div class="ui-widget-content"> 
<p>. . 它 的 z-index 是 自动 控制 的 . . </p> 
</div> 


«div class="ui-widget-content"> 
<p>..# stack 选项 。</p> 
</div> 
</div> 


</body> 
</html> 
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jQuery Ul Draggable + Sortable 


Draggable 与 Sortable 的 无 颖 交互 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 拖 动 (Draggable) + 排序 (Sortable) </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script srcz"//code.jquery.com/ui/1.10.4/jquery-ui.js"»«/script» 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom 
li { margin: 5px; padding: 5px; width: 150px; } 
</style> 
<script> 
$(function() { 
$( "#sortable" ).sortable({ 
revert: true 
3); 
$( "#draggable" ).draggable({ 
connectToSortable: "#sortable", 
helper: "clone", 
revert: "invalid" 
3); 
$( "ul, li" ).disableSelection(); 
3); 
</script> 
</head> 
<body> 


<ul> 
«li id-"draggable" class="ui-state-highlight"> 请 拖 搜 我 </1i> 
</ul> 


<ul id="sortable"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 
«/ul» 


«/body» 
«/html» 
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jQuery UI 实例 - 放置 (Droppable) 


为 可 拖 搜 小 部 件 创建 目 标 。 


如 需 了 解 更 多 有 关 droppable 交互 的 细节 ， 请 查看 API 文档 可 放置 小 部 件 
(Droppable Widget) 。 


默认 功能 


在 任意 的 DOM 元 素 上 启用 droppable 功能 ， 并 为 可 拖 搜 小 部 件 创建 目标 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable { width: 100px; height: 100px; padding: 0.5em; float: 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable(); 
$( "#droppable" ).droppable(1 
drop: function( event, ui ) { 


$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "Dropped!" ); 
} 
}); 
}); 
</script> 
</head> 
<body> 


«div id="draggable" class="ui-widget-content"> 
<p> 请 把 我 拖 搜 到 目标 处 </p> 
</div> 


«div id="droppable" class="ui-widget -header"> 
<p> 请 放置 在 这 里 1 </p> 
</div> 


</body> 
</html> 


8o 5 5 5 0 B 


接受 


使 用 accept 选项 指定 目标 droppable 接受 哪 一 个 元 素 (RTRA) o 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 接受 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: 
#draggable, #draggable-nonvalid { width: 100px; height: 100px; pé 
</style> 
<script> 
$(function() { 
$( "#draggable, #draggable-nonvalid" ).draggable(); 
$( "#droppable" ).droppable({ 
accept: "#draggable", 
activeClass: "ui-state-hover", 
hoverClass: "ui-state-active", 
drop: function( event, ui ) ( 


$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "Dropped!" ); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div id="draggable-nonvalid" class="ui-widget-content"> 
<p> 我 是 不 能 被 放置 的 draggable</p> 
</div> 


«div id="draggable" class="ui-widget-content"> 
<p> 请 拖 搜 我 到 目标 </p> 
</div> 


«div id="droppable" class="ui-widget -header"> 
<p>accept: '#draggable'</p> 
</div> 


</body> 
</html> 





防止 传播 


448 BREN droppable 时 — 例如， 您 可 以 有 一 个 树 形 的 可 编辑 的 目录 结构 ， 带 
有 文件 夹 和 文档 节点 一 greedy 选项 设置 为 true 来 防止 当 draggable 被 放置 在 子 
节点 (droppable) 上 时 的 事件 传播 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 防止 传播 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable { width: 100px; height: 40px; padding: 0.5em; float: - 
#droppable, #droppable2 { width: 230px; height: 120px; padding: ( 
#droppable-inner, #droppable2-inner { width: 170px; height: 60px, 
</style> 
<script> 
$(function() { 

$( "#draggable" ).draggable(); 


$( "#droppable, #droppable-inner" ).droppable({ 
activeClass: "ui-state-hover", 
hoverClass: "ui-state-active", 
drop: function( event, ui ) { 
$( this ) 
.addClass( "ui-state-highlight" ) 
bein p 
.html( "Dropped!" ); 
return false; 


} 
}); 
$( "#droppable2, #droppable2-inner" ).droppable({ 
greedy: true, 
activeClass: "ui-state-hover", 
hoverClass: "ui-state-active", 
drop: function( event, ui ) { 
$( this ) 
.addClass( "ui-state-highlight" ) 
Sp dnd > ) 
.html( "Dropped!" ); 


à 
3); 
31); 
«/script» 
</head> 
<body> 


<div id="draggable" class="ui-widget-content"> 
<p> 请 拖 搜 我 到 目标 </p> 


</div> 


«div id="droppable" class="ui-widget -header"> 
<p> 外 部 droppable</p> 
«div id="droppable-inner" class="ui-widget -header'"> 
<p> 内 部 droppable (不 带 有 greedy) </p> 
</div> 
</div> 


<div id="droppable2" class="ui-widget -header"> 
<p> 外 部 droppable</p> 
«div id="droppable2-inner" class="ui-widget -header"> 
<p> 内 部 droppable (#€ greedy) </p> 
</div> 
</div> 


</body> 
</html> 
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还 原 draggable 的 位 置 


当 带 有 布尔 值 revert 选项 的 draggable 停止 拖 搜 时 ， 返 回 draggable (或 它 的 
助手 ) 到 原始 位 置 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 还 原 draggable 的 位 置 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 100px; height: 100px; padding: ( 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable({ revert: "valid" }); 
$( "#draggable2" ).draggable({ revert: "invalid" }); 


$( "#droppable" ).droppable( { 
activeClass: "ui-state-default", 
hoverClass: "ui-state-hover", 
drop: function( event, ui ) { 


$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "BRE!" ); 
} 
3); 
p); 
</script> 
</head> 
<body> 


«div id="draggable" class="ui-widget-content"> 
<p> 当 被 放置 在 目标 上 时 还 原 </p> 
</div> 


«div id="draggable2" class="ui-widget-content"> 
<p> 当 未 被 放置 在 目标 上 时 还 原 </p> 
</div> 


«div id="droppable" class="ui-widget -header"> 
<p> 请 放置 在 这 里 </p> 
</div> 


</body> 
</html> 
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购物 车 演示 


NO A e RRR A Sn B ED GE Hs d, ARAM BRAM A oF yD 
车 ， 购 物 车 中 的 产品 是 可 排序 的 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 购物 车 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
hi { padding: .2em; margin: 0; } 
#products { float:left; width: 500px; margin-right: 2em; } 
#cart { width: 200px; float: left; margin-top: 1em; } 
/* 定义 列表 样式 ， 以 便 最 大 化 droppable */ 
#cart ol { margin: 0; padding: 1em © 1em 3em; } 
</style> 
<script> 
$(function() { 
$( "#catalog" ).accordion(); 
$( "#catalog li" ).draggable({ 
appendTo: "body", 
helper: "clone" 
3); 
$( "#cart ol" ).droppable({ 
activeClass: "ui-state-default", 
hoverClass: "ui-state-hover", 
accept: ":not(.ui-sortable-helper)", 
drop: function( event, ui ) { 
$( this ).find( ".placeholder" ).remove(); 
$( "«li»«/li»" ).text( ui.draggable.text() ).appendTo( thi: 


} 
}).sortable({ 
items: "li:not(.placeholder)", 
sort: function() { 
// 获取 由 droppable 与 sortable 交互 而 加 入 的 条 目 
// 使 用 connectWithSortable 可 以 解决 这 个 问题 ， 但 不 允许 您 自 定义 ac 
$( this ).removeClass( "ui-state-default" ); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div id="products"> 
«hi class-"ui-widget-header"» > m</h1> 
<div id="catalog"> 
<h2><a href="#">T-Shirts</a></h2> 
<div> 


<ul> 
<li>Lolcat Shirt</1li> 
<li>Cheezeburger Shirt</1li> 
<li>Buckit Shirt</1li> 
</ul> 
</div> 
<h2><a href="#">Bags</a></h2> 
<div> 
<ul> 
<li>Zebra Striped</1li> 
<li>Black Leather</1i> 
<li>Alligator Leather</1li> 
</ul> 
</div> 
<h2><a href="#">Gadgets</a></h2> 
<div> 
<ul> 
«li»iPhonec/li» 
«li»iPodc/li» 
<li>iPad</li> 
</ul> 
</div> 
</div> 
</div> 


<div id="cart"> 
<h1 class="ui-widget -header ">m Ħ#)#</h1> 
<div class="ui-widget-content"> 
<ol> 
<li class="placeholder"> 添 加 产品 到 这 里 </1i> 
</ol> 
</div> 
</div> 


</body> 
</html> 
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简单 的 照片 管理 器 


您 可 以 通过 拖 搜 照片 到 回收 站 或 者 点 击 回收 站 图 标 来 删除 照片 。 
您 可 以 通过 拖 搜 照片 到 相册 或 者 点 击 回收 利用 图 标 来 还 原 照 片 。 


您 可 以 通过 点 击 缩放 图 标 来 查看 大 图 。jQuery Ul 对 话 框 (dialog) 部 件 用 于 模 态 窗 
口 。 





<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 

<title>jQuery UI 放置 (Droppable) - 简单 的 照片 管理 器 </title> 

<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 

#gallery { float: left; width: 65%; min-height: 12em; } 
.gallery.custom-state-active { background: #eee; } 

gallery li { float: left; width: 96px; padding: 0.4em; margin: ( 
.gallery li h5 { margin: © © 0.4em; cursor: move; } 

.gallery li a { float: right; } 

.gallery li a.ui-icon-zoomin { float: left; } 

.gallery li img { width: 100%; cursor: move; } 


#trash { float: right; width: 32%; min-height: 18em; padding: 1%, 
#trash h4 { line-height: 16px; margin: © © ©.4em; } 
#trash h4 .ui-icon { float: left; } 
#trash .gallery h5 { display: none; } 
</style> 
<script> 
$(function() { 

// 这 是 相册 和 回收 站 

var $gallery = $( "#gallery" ), 

$trash = $( "#trash" ); 


// 让 相册 的 条 目 可 拖 搜 
$( "li", $gallery ).draggable({ 
cancel: "a.ui-icon", // 点 击 一 个 图 标 不 会 启动 拖 搜 
revert: "invalid", // 当 未 被 放置 时 ， 条 目 会 还 原 回 它 的 初始 位 置 
containment: "document", 
helper: "clone", 
cursor: "move" 


3): 


// 让 回收 站 可 放置 ， 接 受 相 册 的 条 目 
$trash.droppable(1 
accept: "#gallery > li", 
activeClass: "ui-state-highlight", 
drop: function( event, ui ) ( 
deleteImage( ui.draggable ); 
} 
}); 


// 让 相册 可 放置 ， 接 受 回 收 站 的 条 目 
$gallery.droppable({ 
accept: "#trash li", 
activeClass: "custom-state-active", 
drop: function( event, ui ) { 
recycleImage( ui.draggable ); 
} 
}); 


// 图 像 删除 功能 
var recycle_icon = "<a href='link/to/recycle/script/when/we/ha\ 
function deleteImage( $item ) { 
$item.fadeOut(function() { 
var $list = $( "ul", $trash ).length ? 
$( "ul", $trash ) 
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $i 


$item.find( "a.ui-icon-trash" ).remove(); 
$item.append( recycle icon ).appendTo( $list ).fadeIn(funct 
$item 
.animate(( width: "48px" }) 
.find( "img" ) 
.animate({ height: "36px" }); 
}); 
}); 
} 


// 图 像 还 原 功能 
var trash icon = "<a hrefz'link/to/trash/script/when/we/have/ j: 
function recycleImage( $item ) { 

$item.fadeOut(function() { 


$item 
.find( "a.ui-icon-refresh" ) 
.remove( ) 
.end() 


.css( "width", "96px") 
.append( trash icon ) 
.find( "img" ) 
.CSS( "height", "72px" ) 
.end() 
.appendTo( $gallery ) 
.fadeIn(); 
3); 
} 


// 图 像 预览 功能 ， 演 示 ui.dialog 作为 模 态 窗口 使 用 
function viewLargerImage( $link ) { 
var src = $link.attr( "href" ), 
title = $link.siblings( "img" ).attr( "alt" ), 
$modal = $( "img[src$-'" + src + "']" ); 


if ( $modal.length ) { 
$modal.dialog( "open" ); 
} else { 
var img = $( "<img alt='" + title + "' width='384' height= 
.attr( "src", src ).appendTo( "body" ); 
setTimeout(function() { 
img.dialog({ 
title: title, 
width: 400, 
modal: true 


D 


}, 1); 
} 
} 


// 通过 事件 代理 解决 图 标 行为 
$( "ul.gallery > 1i" ).click(function( event ) { 
var $item = $( this ), 
$target = $( event.target ); 


if ( $target.is( "a.ui-icon-trash" ) ) { 
deleteImage( $item ); 

} else if ( $target.is( "a.ui-icon-zoomin" ) ) { 
viewLargerImage( $target ); 

) else if ( $target.is( "a.ui-icon-refresh" ) ) { 
recycleImage( $item ); 


} 


return false; 


3); 
3); 
</script> 
</head> 
<body> 


«div class="ui-widget ui-helper-clearfix"> 


«ul id-"gallery" class="gallery ui-helper-reset ui-helper-clearfix' 
«li class="ui-widget-content ui-corner-tr"> 
<h5 class="ui-widget-header">High Tatras</h5> 
<img src="img/high_tatras_min.jpg" alt="High Tatras 的 最 高 峰 " wi 
«a href="img/high_tatras.jpg" title=" 查 看 大 图 " class="ui-icon ui 
«a href="link/to/trash/script/when/we/have/js/off" title=" mIRE 
</li> 
«li class="ui-widget-content ui-corner-tr"> 
<h5 class="ui-widget-header">High Tatras 2</h5> 
<img src="img/high_tatras2_min.jpg" alt=" 绿 山 湖畔 的 小 屋 " width="¢ 
«a href="img/high_tatras2.jpg" title=" 查 看 大 图 " class="ui-icon u 
«a href="link/to/trash/script/when/we/have/js/off" title=" mIRE 
</li> 
«li class="ui-widget-content ui-corner-tr"> 
<h5 class="ui-widget-header">High Tatras 3</h5> 
<img src="img/high_tatras3_min.jpg" alt=" 计 划 登 高 " width="96" he 
<a href="img/high_tatras3.jpg" title=" 查 看 大 图 " class="ui-icon u 
«a href="link/to/trash/script/when/we/have/js/off" title=" HIRE 
</li> 
«li class="ui-widget-content ui-corner-tr"> 
<h5 class="ui-widget-header">High Tatras 4</h5> 
<img src="img/high_tatras4_min.jpg" alt="%E Kozi kopka 的 顶部 " w 
<a href="img/high_tatras4.jpg" title=" 查 看 大 图 " class="ui-icon u 
«a href="link/to/trash/script/when/we/have/js/off" title=" mIRE 
</li> 
</ul> 


«div id="trash" class="ui-widget-content ui-state-default"> 
<h4 class="ui-widget -header"><span class="ui-icon ui-icon-trash": 
</div> 


</div> 


</body> 
</html> 
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视觉 反馈 


4 2(S4 droppable 上 时 ， 或 者 当 droppable 被 激活 ( 即 一 个 可 接受 的 draggable 
被 放置 在 droppable E) 时 ， 改 变 droppable 的 外 观 。 使 用 hoverclass 或 
activeClass 选项 来 分 别 指 定 class。 








<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 放置 (Droppable) - 视觉 反馈 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#draggable, #draggable2 { width: 90px; height: 90px; padding: O0.: 
#droppable, #droppable2 { width: 120px; height: 120px; padding: ( 
h3 { clear: left; } 
</style> 
<script> 
$(function() { 
$( "#draggable" ).draggable(); 
$( "#droppable" ).droppable({ 
hoverClass: "ui-state-hover", 
drop: function( event, ui ) { 
$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "Dropped!" ); 
} 
}); 
$( "#draggable2" ).draggable(); 
$( "#droppable2" ).droppable({ 
accept: "#draggable2", 
activeClass: "ui-state-default", 
drop: function( event, ui ) { 


$( this ) 
.addClass( "ui-state-highlight" ) 


,find( "p" ) 
.html( "Dropped!" ); 


} 
3); 
+); 
</script> 
</head> 
<body> 


<h3>4 212% droppable 上 时 的 反馈 : </h3> 


«div id="draggable" class="ui-widget-content"> 
<p> 请 拖 搜 我 到 目标 </p> 
</div> 


«div id="droppable" class="ui-widget -header"> 
<p> 请 放置 在 这 里 </p> 
</div> 


<h3> 当 激活 draggable 时 的 反馈 : </h3> 
<div id="draggable2" class="ui-widget-content"> 


<p> 请 拖 搜 我 到 目标 </p> 
</div> 


<div id="droppable2" class="ui-widget -header"> 
<p> 请 放置 在 这 里 </p> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 缩放 (Resizable) 


使 用 鼠标 改变 元 素 的 尺寸 。 


如 需 了 解 更 多 有 关 resizable 交互 的 细节 ， 请 查看 API 文档 可 调整 尺寸 小 部 件 
(Resizable Widget) 。 


默认 功能 


在 任意 的 DOM TR 6 FH resizable 功能 。 通 过 鼠标 拖 搜 右边 或 底 边 的 边框 到 所 
需 的 宽度 或 高 度 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 默认 功能 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable(); 
1); 
</script> 
</head> 
<body> 


«div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header">#8h (Resizable) </h3> 
</div> 


</body> 
</html> 





使 用 animate 选项 (布尔 值 ) 使 缩放 行为 动画 化 。 当 该 选项 设置 为 true, fü 
搜 轮 廊 到 所 需 的 位 置 ， 元 素 会 在 拖 搜 停止 时 以 动画 形式 调整 到 该 尺寸 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 动画 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
.ui-resizable-helper { border: 1px dotted gray; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
animate: true 
3); 
}); 
</script> 
</head> 
<body> 


«div id="resizable" class="ui-widget-content"> 
<h3 clLass="ui-widget-header"> 动 画 </h3> 
</div> 


</body> 
</html> 


pE 9$ 
限制 缩放 区 域 


定义 缩放 区 域 的 边界 。 使 用 containment 选项 来 指定 一 个 父 级 的 DOM 元 素 或 一 
个 jQuery 选择 器 ， 上 比如 'document.'。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 限制 缩放 区 域 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#container { width: 300px; height: 300px; } 
#container h3 { text-align: center; margin: 0; margin-bottom: 10; 
#resizable { background-position: top left; width: 150px; height 
#resizable, #container { padding: 0.5em; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable(( 
containment: "#container" 
3): 
3); 
«/script» 
</head> 
<body> 


«div id="container" class="ui-widget-content"> 
<h3 class="ui-widget -header'">BRiill</h3> 
«div id="resizable" class="ui-state-active"> 
<h3 class="ui-widget -header">#8i (Resizable) </h3> 
</div> 
</div> 


</body> 
</html> 
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正 迟 开始 


通过 delay 选项 设置 延迟 开始 缩放 的 毫秒 数 。 通 过 distance 选项 设置 光标 被 
按 下 且 拖 搜 指定 像素 后 才 人 允许 缩放 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 延迟 开始 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable, #resizable2 { width: 150px; height: 150px; padding: ( 
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 

$( "#resizable" ).resizable(( 
delay: 1000 


3): 


$( "#resizable2" ).resizable({ 
distance: 40 
ioe 
1); 
«/script» 
«/head» 
«body» 


«h3 class="docs">s¢ H HER (ms):«/h3» 

<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header ">8¥ ja] </h3> 

</div> 


<h3 class="docs"> 距 离 延 迟 (px):</h3> 

«div id="resizable2" class="ui-widget-content"> 
<h3 class="ui-widget -header">#B</h3> 

</div> 


</body> 
</html> 





助手 


通过 设置 helper 选项 为 一 个 CSS class， 当 缩放 时 只 显示 元 素 的 轮廓 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 助手 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
.ui-resizable-helper { border: 2px dotted #00F; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
helper: "ui-resizable-helper" 
3); 
}); 
</script> 
</head> 
<body> 


<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header">8)#</h3> 
</div> 


</body> 
</html> 


a Se) 
最 大 /最 小 尺寸 


使 用 maxHeight 、 maxWidth 、 minHeight 和 minwidth 选项 限制 
resizable 元 素 的 最 大 或 最 小 高 度 或 宽度 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 最 大 /最 小 尺寸 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 200px; height: 150px; padding: 5px; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
maxHeight: 250, 
maxWidth: 350, 
minHeight: 150, 
minwidth: 200 
3); 
3); 
«/script» 
</head> 
<body> 


«div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget-header"> 放 大 /缩小 </h3> 
</div> 


</body> 
</html> 


E) 


保持 纵横 比 


保持 现 有 的 纵横 比 或 设置 一 个 新 的 纵横 比 来 限制 缩放 比例 。 设 置 aspectRatio 
选项 为 true， 且 可 选 地 传递 一 个 新 的 比率 (比如 ，4/3) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 保持 纵横 比 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 160px; height: 90px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable(( 
aspectRatio: 16 / 9 
3); 
3); 
</script> 
</head> 
<body> 


<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget-header"> 保 持 纵横 比 </h3> 
</div> 


</body> 
</html> 
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对 齐 到 网 格 


对 齐 resizable 元 素 到 网 格 。 通 过 grid 选项 设置 网 格 单元 的 尺寸 (以 像素 为 单位 
的 高 度 和 宽度 ) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 对 齐 到 网 格 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
grid: 50 
3): 
3); 
</script> 
</head> 
<body> 


«div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header">ht§</h3> 
</div> 


</body> 
</html> 
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同步 缩放 


pea 个 元 素 的 边 来 同时 调整 多 个 元 素 的 尺寸 。 给 alsoResize 选项 
传递 一 共享 的 选 dte. 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 同步 缩放 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { background-position: top left; } 
#resizable, #also ( width: 150px; height: 120px; padding: 0.5em; 
#resizable h3, #also h3 { text-align: center; margin: 0; } 
#also { margin-top: 1em; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable(( 
alsoResize: "#also" 


3); 
$( "Zalso" ).resizable(); 


3); 

«/script» 
</head> 
<body> 


<div id="resizable" class="ui-widget -header"> 
<h3 class="ui-state-active"> 缩 放 </h3> 
</div> 


<div id="also" class="ui-widget-content"> 
<h3 class="ui-widget-header"> 同 步 缩放 </h3> 
</div> 


</body> 
</html> 





文本 框 


可 缩放 的 文本 框 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - MAHE</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.ui-resizable-se { 
bottom: 17px; 
} 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
handles: "se" 
3): 
3); 
«/script» 
«/head» 
«body» 


«textarea id-"resizable" rows="5" cols="20"></textarea> 


«/body» 
«/html» 





设置 ghost 选项 为 true， 可 在 缩放 期 间 显 示 一 个 半 透 明 的 元 素 ， 而 不 是 显示 
一 个 实际 的 元 素 。 


<!doctype html> 
<html lang="en"> 


<head> 
<meta charset="utf-8"> 
<title>jQuery UI 缩放 (Resizable) - 视觉 反馈 </title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#resizable { width: 150px; height: 150px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
.ui-resizable-ghost { border: 1px dotted gray; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ).resizable({ 
ghost: true 
3); 
3); 
</script> 
</head> 
<body> 


<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget -header">Ghost</h3> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 选择 (Selectable) 


使 用 鼠标 选择 单个 元 素 或 一 组 元 素 。 


如 需 了 解 更 多 有 关 selectable 交互 的 细节 ， 请 查看 API 文档 可 选择 小 部 件 
(Selectable Widget) 。 


默认 功能 


EZA DOM 元 素 上 或 者 一 组 元 素 上 启用 selectable 功能 。 通 过 鼠标 拖 搜 选 择 条 
目 。 按 住 Ctrl 键 ， 选 择 多 个 不 相 邻 的 条 目 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 选择 (Selectable) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
#feedback { font-size: 1.4em; } 
Zselectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; widtt 
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; 1 
</style> 
<script> 
$(function() { 
$( "#selectable" ).selectable(); 
3); 
«/script» 
«/head» 
«body» 


«ol id="selectable"> 
«li class="ui-widget-content">Item 1«/li» 
«li class="ui-widget-content">Item 2«/li» 
«li class="ui-widget-content">Item 3«/li» 
«li class="ui-widget-content">Item 4</1i> 
«li class="ui-widget-content">Item 5«/li» 
«li class="ui-widget-content">Item 6«/li» 
«li class="ui-widget-content">Item 7«/li» 

«/ol» 


«/body» 
«/html» 
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显示 为 网 格 


让 selectable 条 目 显 示 为 网 格 ， 使 用 CSS 使 得 它们 带 有 相同 的 尺寸 且 浮 动 显 示 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 选择 (Selectable) - 显示 为 网 格 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
#feedback { font-size: 1.4em; } 
#selectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; widtl 
#selectable li { margin: 3px; padding: 1px; float: left; width: : 
</style> 
<script> 
$(function() { 
$( "#selectable" ).selectable(); 
3); 
«/script» 
«/head» 
«body» 


«ol id="selectable"> 
«li class="ui-state-default">1</1li> 
«li class="ui-state-default">2</1li> 
«li class="ui-state-default">3</1li> 
<li class="ui-state-default">4</1li> 
<li class="ui-state-default">5</1li> 
<li class="ui-state-default">6</1li> 
<li class="ui-state-default">7</1li> 
<li class="ui-state-default">8</1li> 
<li class="ui-state-default">9</1li> 
«li class="ui-state-default">10</1li> 
«li class-"ui-state-default"»11«/li» 
«li class-"ui-state-default"»12«/li» 

«/ol» 


«/body» 
«/html» 


SS 


序列 化 


ENKA, Æ stop 事件 发 生 时 触发 ， 来 收集 被 选中 条 目的 索引 值 。 呈 现 这 些 
值 作 为 反馈 ， 或 者 以 数据 字符 串 形 式 进行 传递 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 选择 (Selectable) - 序列 化 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
#feedback { font-size: 1.4em; } 
#selectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; widtl 
#selectable li ( margin: 3px; padding: 0.4em; font-size: 1.4em; 1 
</style> 
<script> 
$(function() { 
$( "#selectable" ).selectable({ 
stop: function() { 
var result = $( "#select-result" ).empty(); 
$( ".ui-selected", this ).each(function() { 
var index = $( "#selectable li" ).index( this ); 
result.append( " #" + ( index + 1 ) ); 
3); 
j 
3); 
3); 
«/script» 
</head> 
<body> 


<p id="feedback"> 
<span> 您 已 经 选择 了 : </span> <span id="select-result"></span>, 
</p> 


«ol id="selectable"> 
<li class="ui-widget-content">Item 1</1i> 
«li class="ui-widget-content">Item 2«/li» 
«li class="ui-widget-content">Item 3«/li» 
«li class="ui-widget-content">Item 4</1i> 
«li class="ui-widget-content">Item 5«/li» 
«li class="ui-widget-content">Item 6«/li» 

</ol> 


</body> 
</html> 
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jQuery UI 实例 - 排序 (Sortable) 
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如 需 了 解 更 多 有 关 sortable 交互 的 细节 ， 请 查看 API 文档 可 排序 小 部 件 (Sortable 
Widget) 。 


默认 功能 


在 任意 的 DOM 元 素 上 启用 sortable 功能 。 通 过 鼠标 点 击 并 拖 搜 元 素 到 列表 中 的 一 
个 新 的 位 置 ， 其 它 条 有 目 会 自动 调整 。 默 认 情 况 下 ，sortable 各 个 条 目 共 享 
draggable 属性 。 


<!doctype html> 


<html 
<head> 


lang="en"> 


<meta charset="utf-8"> 

<title>jQuery UI 排序 (Sortable) - 默认 功能 </title> 

<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 

#sortable { list-style-type: none; margin: 0; padding: 0; width: 
#sortable li { margin: © 3px 3px 3px; padding: 0.4em; padding-lel 
#sortable li span { position: absolute; margin-left: -1.3em; ) 
</style> 

<script> 

$(function() { 


$( "#sortable" ).sortable(); 
$( "#sortable" ).disableSelection(); 
3); 
«/script» 
</head> 
<body> 
<ul id="sortable"> 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtt 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowtl 
«li class="ui-state-default"><span class="ui-icon ui-icon-arrowtt 
</ul> 
</body> 
</html> 
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连接 列表 


通过 向 connectwith 选项 传递 一 个 选择 器 ， 来 把 一 个 列表 中 的 元 素 排 序 到 另 一 


个 列表 中 ， 


ES k 


Hx ju] 


反之 亦 然 。 


connectwith: 





单 的 办 法 是 将 带 有 某 个 CSS class 的 所 有 相关 的 列表 分 


组 ， 然 后 传递 该 class 到 sortable MAX 〈 比 如 ， '.myclass' ) 。 


通过 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 连接 列表 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable1, #sortable2 { list-style-type: none; margin: 0; paddir 
#sortable1 li, #sortable2 li { margin: © 5px 5px 5px; padding: 5 
</style> 
<script> 
$(function() { 

$( "Zsortablei, #sortable2" ).sortable({ 


connectWith: ".connectedSortable" 
}).disableSelection(); 
1); 
«/script» 
«/head» 
«body» 


«ul id-"sortabled1" class="connectedSortable"> 


«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 


«/ul» 


«ul id="sortable2" class="connectedSortable"> 


«li class="ui-state-highlight">Item 1«/li» 
«li class="ui-state-highlight">Item 2«/1li» 
«li class="ui-state-highlight">Item 3«/li» 
«li class="ui-state-highlight">Item 4«/li» 
«li class="ui-state-highlight">Item 5«/li» 


«/ul» 


«/body» 
«/html» 


LLL EB 


: 签 页 连接 列表 





放置 列表 项 到 顶部 适当 的 标签 页 中 ， 来 把 一 个 列表 中 的 元 素 排 序 到 另 一 个 列表 


中 ， 反 之 亦 然 。 


<!doctype html> 


<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 标签 页 连接 列表 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
4sortablei li, #sortable2 li { margin: © 5px 5px 5px; padding: 5; 
</style> 
<script> 
$(function() { 

$( "#sortable1, #sortable2" ).sortable().disableSelection(); 


var $tabs = $( "#tabs" ).tabs(); 


var $tab items = $( "ul:first li", $tabs ).droppable({ 
accept: ".connectedSortable li", 
hoverClass: "ui-state-hover", 
drop: function( event, ui ) ( 
var $item = $( this ); 
var $list = $( $item.find( "a" ).attr( "href" ) ) 
.find( ".connectedSortable" ); 


ui.draggable.hide( "slow", function() { 
$tabs.tabs( "option", "active", $tab items.index( $item ` 
$( this ).appendTo( $list ).show( "slow" ); 
3); 
} 
H); 
3); 
«/script» 
«/head» 
«body» 


«div id="tabs"> 
«ul» 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1li> 
</ul> 
«div id="tabs-1"> 
«ul id="sortable1" class="connectedSortable ui-helper-reset"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 
«/ul» 
«/div» 
«div id="tabs-2"> 
«ul id-"sortable2" class="connectedSortable ui-helper-reset"> 
«li class="ui-state-highlight">Item 1</1li> 


«li class="ui-state-highlight">Item 2«/1li» 
«li class="ui-state-highlight">Item 3«/li» 
«li class="ui-state-highlight">Item 4</1i> 
«li class="ui-state-highlight">Item 5«/li» 
«/ul» 
«/div» 
«/div» 


«/body» 
«/html» 
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延迟 开始 


通过 时 间 延 迟 和 距离 延迟 来 防止 意外 的 排序 。 通 过 delay 选项 设置 开始 排序 之 前 
WTR ASMA, 38:1 distance 选项 设置 开始 排序 之 前 必须 拖 搜 的 像素 数 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 延迟 开始 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable1, #sortable2 { list-style-type: none; margin: 0; paddir 
#sortable1 li, #sortable2 li { margin: © 5px 5px 5px; padding: 5 
</style> 
<script> 
$(function() { 

$( "#sortablei" ).sortable({ 
delay: 300 


3): 


$( "#sortable2" ).sortable({ 
distance: 15 


3); 


$( "li" ).disableSelection(); 
31); 
«/script» 
«/head» 
«body» 


«h3 class="docs"> 时 间 延 迟 300ms : </h3> 


<ul id="sortablei"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«/ul» 


«h3 class="docs"> 距 离 延 迟 15px : </h3> 


<ul id="sortable2"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«/ul» 


«/body» 
«/html» 








显示 为 网 格 
让 sortable 条 目 显 示 为 网 格 ， 使 用 CSS 使 得 它们 带 有 相同 的 尺寸 且 浮 动 显 示 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 显示 为 网 格 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; 
</style> 
<script> 
$(function() { 
$( "#sortable" ).sortable(); 
$( "#sortable" ).disableSelection(); 
3); 
</script> 
</head> 
<body> 


<ul id="sortable"> 
<li class="ui-state-default">1</1li> 
«li class="ui-state-default">2</1li> 
<li class="ui-state-default">3</1li> 
<li class="ui-state-default">4</1li> 
<li class="ui-state-default">5</1li> 
«li class="ui-state-default">6</1li> 
<li class="ui-state-default">7</1li> 
<li class="ui-state-default">8</1li> 
<li class="ui-state-default">9</1li> 
<li class="ui-state-default">10</1li> 
«li class="ui-state-default">11</1li> 
«li class="ui-state-default">12</1li> 

</ul> 


</body> 
</html> 


sd ES 


放置 占 位 符 





当 拖 搜 一 个 sortable 条 目 到 一 个 新 的 位 置 时 ， 其 他 条 目 将 为 该 条 目 腾 出 空间 。 向 
placeholder 选项 传递 一 个 class 来 定义 可 视 化 的 空白 的 样式 。 使 用 布尔 值 的 
forcePlaceholderSize 选项 来 设置 占 位 符 的 尺寸 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 放置 占 位 符 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 
#sortable li { margin: © 5px 5px 5px; padding: 5px; font-size: 1 
html>body #sortable li { height: 1.5em; line-height: 1.2em; } 
.Ui-state-highlight { height: 1.5em; line-height: 1.2em; } 
</style> 
<script> 
$(function() { 

$( "#sortable" ).sortable({ 
placeholder: "ui-state-highlight" 


3): 
$( "#sortable" ).disableSelection(); 


1); 

</script> 
</head> 
<body> 


<ul id="sortable"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default">Item 2«/li» 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 
«li class="ui-state-default">Item 6«/li» 
«li class="ui-state-default">Item 7«/li» 

«/ul» 


«/body» 
«/html» 


B[m——————————— M —MÁÀÍ— 
处 理 空 列表 


通过 把 选项 设置 为 false ， 来 阻止 一 个 列表 中 的 所 有 条 目 被 放置 到 一 个 单独 的 空 
FFA, SAU ERR, sortable 条 目 可 被 放置 到 空 的 列表 中 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 处 理 空 列表 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable1, #sortable2, #sortable3 { list-style-type: none; marg: 
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; paddir 
</style> 
<script> 
$(function() { 

$( "ul.droptrue" ).sortable({ 
connectWith: "ul" 


3); 


$( "ul.dropfalse" ).sortable({ 
connectWith: "ul", 
dropOnEmpty: false 


3): 


$( "#sortable1, #sortable2, #sortable3" ).disableSelection(); 
1); 
«/script» 
«/head» 
«body» 


«ul id="sortable1" class="droptrue"> 
<li class="ui-state-default"> 可 被 放置 到 . . </li> 
<li class="ui-state-default">. .一 个 空 列表 中 </1i> 
«li class="ui-state-default">Item 3«/li» 
«li class="ui-state-default">Item 4«/li» 
«li class="ui-state-default">Item 5«/li» 

«/ul» 


«ul id="sortable2" class="dropfalse"> 
«li class="ui-state-high1ight"> 不 可 被 放置 到 . .</1i> 
«li class="ui-state-highlight">. .一 个 空 列表 中 </1i> 
«li class="ui-state-highlight">Item 3</1i> 
«li class="ui-state-highlight">Item 4«/li» 
«li class="ui-state-highlight">Item 5«/li» 

</ul> 


<ul id="sortable3" class="droptrue"> 
</ul> 


<br style="clear:both"> 


</body> 


</html> 
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包含 /排除 条 目 
指定 通过 向 items 选项 传递 一 个 jQuery 选择 器 哪些 项 目 可 排序 。 该 选项 之 外 的 
项 目 则 是 不 可 排序 的 ， 同 时 它们 也 不 是 sortable 条 目的 有 效 的 目标 。 


如 果 只 想 防止 特定 的 条 有 目 排 序 ， 则 向 cancel 选项 传递 一 个 jQuery 选择 器 。 已 取 
消 的 条 目 依 然 是 其 他 条 目的 有 效 的 排序 目标 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 包含 /排除 条 目 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#sortable1, #sortable2 { list-style-type: none; margin: 0; paddir 
#sortable1 li, #sortable2 li ( margin: © 5px 5px 5px; padding: 3; 
</style> 
<script> 
$(function() { 

$( "#sortablei" ).sortable({ 
items: "li:not(.ui-state-disabled)" 


3): 


$( "#sortable2" ).sortable({ 
cancel: ".ui-state-disabled" 


3); 


$( "#sortable1 li, #sortable2 li" ).disableSelection(); 
1); 
</script> 
</head> 
<body> 


«h3 class="docs"> 指 定 哪 个 条 目 是 sortable: </h3> 


«ul id="sortablei"> 
«li class="ui-state-default">Item 1«/li» 
«li class-"ui-state-default ui-state-disabled"» (我 不 是 sortable 
«li class-"ui-state-default ui-state-disabled"> (我 不 是 sortable 
<li class="ui-state-default">Item 4«/li» 

</ul> 


Anl Anl 


<h3 class="docs"> 取 消 排序 〈 但 作为 放置 目标 ) : </h3> 


<ul id="sortable2"> 
«li class="ui-state-default">Item 1«/li» 
«li class="ui-state-default ui-state-disabled"» (我 不 是 sortable) 
<li class="ui-state-default ui-state-disabled"> (我 不 是 sortable) 
<li class="ui-state-default">Item 4</1i> 

</ul> 


</body> 
</html> 








门户 组 件 (Portlets) 


启用 门户 组 件 (样式 化 的 div) 作为 sortable， 并 使 用 connectwith 选项 来 允许 
在 列 之 间 进 行 排序 。 


<!doctype html> 
<html lang="en"> 


<head> 
<meta charset="utf-8"> 
<title>jQuery UI 排序 (Sortable) - 门户 组 件 (Portlets) </title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
body { 

min-width: 520px; 
} 
.column { 

width: 170px; 

float: left; 

padding-bottom: 100px; 
} 
.portlet { 

margin: © 1em 1em 0; 

padding: 0.3em; 
} 
.portlet-header { 

padding: 0.2em 0.3em; 

margin-bottom: 0.5em; 

position: relative; 


.portlet-toggle { 
position: absolute; 
top: 50%; 
right: 0; 
margin-top: -8px; 

} 

.portlet-content { 
padding: 0.4em; 

} 

.portlet-placeholder { 
border: 1px dotted black; 
margin: © 1em 1em 0; 
height: 50px; 

} 

</style> 

<script> 

$(function() { 
$( ".column" ).sortable({ 

connectWith: ".column", 


handle: ".portlet-header", 
cancel: ".portlet-toggle", 
placeholder: "portlet-placeholder ui-corner-all" 


3): 


$( ".portlet" ) 
.addClass( "ui-widget ui-widget-content ui-helper-clearfix u: 
.find( ".portlet-header" ) 
.addClass( "ui-widget-header ui-corner-all" ) 
.prepend( "<span class='ui-icon ui-icon-minusthick portlet. 


$( ".portlet-toggle" ).click(function() { 
var icon = $( this ); 
icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" ); 
icon.closest( ".portlet" ).find( ".portlet-content" ).togglei 
3); 
3); 
«/script» 
«/head» 
«body» 


«div class-"column"» 


«div class="portlet"> 

«div class="portlet-header">j7 }J</div> 

«div class="portlet-content">Lorem ipsum dolor sit amet, conse 
</div> 


<div class="portlet"> 

«div class="portlet-header">#f iq </div> 

«div class="portlet-content">Lorem ipsum dolor sit amet, consec 
</div> 


</div> 
<div class="column"> 
<div class="portlet"> 
«div class="portlet-header">% </div> 
«div class="portlet-content">Lorem ipsum dolor sit amet, conse 
</div> 
</div> 
<div class="column"> 
<div class="portlet"> 
«div class="portlet-header">####</div> 
«div class="portlet-content">Lorem ipsum dolor sit amet, consec 


«/div» 


«div class="portlet"> 
«div class="portlet-header">A {</div> 


<div class="portlet-content">Lorem ipsum dolor sit amet, consec 
</div> 


</div> 


</body> 
</html> 








jQuery UI 实例 - 31 mtr (Accordion) 


在 一 个 有 限 的 空间 内 显示 用 于 呈现 信息 的 可 折 生 的 内 容 面板 。 


如 需 了 解 更 多 有 关 accordion 部 件 的 细节 ， 请 查看 API 文档 dre TREE 
(Accordion Widget) 。 


默认 功能 


点 击 头 部 展开 / 折 熏 被 分 为 各 个 逻辑 部 分 的 内 容 ， 就 像 标 签 页 (tabs) 一 样 。 您 可 以 
选择 性 地 设置 当 鼠 标 悬 停 时 是 否 切 换 各 部 分 的 打开 /关闭 状态 。 


基本 的 HTML 标记 是 一 系列 的 标题 (H3 标签 ) 和 内 容 div， 因 此 内 容 不 用 通过 
JavaScript 即 可 用 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 折 受 面板 (Accordion) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#accordion" ).accordion(); 
3); 
«/script» 
</head> 
<body> 


<div id="accordion"> 

<h3> 部 分 1</h3> 

<div> 
<p> 
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quar 
ut neque. Vivamus nisi metus, molestie vel, gravida in, condime 
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin vive 
odio. Curabitur malesuada. Vestibulum a velit eu ante sceleris 
</p> 

</div> 

<h3> 部 分 2</h3> 

<div> 
<p> 
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum s: 
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris tur[ 
velit, faucibus interdum tellus libero ac justo. Vivamus non qt 


suscipit faucibus urna. 
</p> 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p> 
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quis 
Phasellus pellentesque purus in massa. Aenean in pede. Phaselli 
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magn: 
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus ve 
</p> 
<ul> 
<li>List item one</1li> 
<li>List item two</li> 
<li>List item three</li> 
</ul> 
</div> 
<h3> 部 分 4</h3> 
<div> 
<p> 
Cras dictum. Pellentesque habitant morbi tristique senectus et 
et malesuada fames ac turpis egestas. Vestibulum ante ipsum pr: 
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean 
mauris vel est. 
</p> 
<p> 
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consec 
Class aptent taciti sociosqu ad litora torquent per conubia no: 
inceptos himenaeos. 
</p> 
</div> 
</div> 


</body> 
</html> 


f=" 


ir 


WEN F, PARR eR —TRBOSHAN. A SiLMARD ASH AN, 
可 设置 collapsible 选项 为 true。 点 击 当 前 打开 的 部 分 ， 来 折 和 有 登 它 的 内 容 面 
板 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI #ámik (Accordion) - i#t#ANA</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#accordion" ).accordion({ 
collapsible: true 
3); 
3); 
</script> 
</head> 
<body> 


<div id="accordion"> 
<h3> 部 分 1</h3> 


<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, í 
«/div» 
<h3> 部 分 2«/h3» 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulur 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Qi 
<ul> 


<li>List item one</1li> 
<li>List item two</li> 
<li>List item three</li> 
</ul> 
</div> 
<h3> 部 分 4</h3> 
<div> 
<p>Cras dictum. Pellentesque habitant morbi tristique senectus 
</div> 
</div> 


</body> 
</html> 


E = 





自 定 义 图 标 


通过 icons 选项 自 定义 标题 图 标 ， icons 选项 接受 标题 默认 的 和 激活 的 (打开 
的 ) 状态 的 class。 使 用 UI CSS 框架 中 的 任意 class， 或 者 使 用 背景 图 像 创建 自 定 
SLBY class. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI ##MtR (Accordion) - 自 定义 图 标 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var icons = { 
header: "ui-icon-circle-arrow-e", 
activeHeader: "ui-icon-circle-arrow-s" 
3 
$( "#accordion" ).accordion({ 
icons: icons 
3); 
$( "#toggle" ).button().click(function() { 
if ( $( "#accordion" ).accordion( "option", "icons" ) ) { 
$( "#accordion" ).accordion( "option", "icons", null ); 


) else ( 
$( "#accordion" ).accordion( "option", "icons", icons ); 
} 
3); 
3); 
«/script» 
«/head» 
«body» 


«div id="accordion"> 
<h3> 部 分 1</h3> 


<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, í 
«/div» 
<h3> 部 分 2«/h3» 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulur 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. QI 
«ul» 


<li>List item one</1li> 
<li>List item twoc/li» 
<li>List item three</li> 
«/ul» 
«/div» 


<h3> 部 分 4</h3> 
<div> 
<p>Cras dictum. Pellentesque habitant morbi tristique senectus 
</div> 
</div> 


<button id="toggle"> 切 换 图 标 </button> 


</body> 
</html> 
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填充 空间 


由 于 折 和 又 面板 是 由 块 级 元 素 组 成 的 ， 默 认 情 况 下 它 的 宽度 会 填充 可 用 的 水 平 空间 。 
为 了 填充 由 容器 分 配 的 垂直 空间 ， 设 置 heightstyle 选项 为 "fill" ， 脚 本 会 
自动 设置 折 和 过 面板 的 尺寸 为 父 容器 的 高 度 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI } mtk (Accordion) - 填充 空间 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#accordion-resizer { 
padding: 10px; 
width: 350px; 
height: 220px; 
} 
</style> 
<script> 
$(function() { 
$( "#accordion" ).accordion({ 
heightStyle: "fill" 
3): 
3); 
$(function() { 
$( "#accordion-resizer" ).resizable({ 
minHeight: 140, 
minwidth: 200, 
resize: function() { 
$( "#accordion" ).accordion( "refresh" ); 
} 
}); 
}); 


</script> 


</head> 
<body> 


<h3 class="docs"> 重 新 调整 外 部 容器 : </h3> 
<div id="accordion-resizer" class="ui-widget-content"> 


<div id="accordion"> 
<h3> 部 分 1</h3> 


<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, 
</div> 
<h3> 部 分 2</h3> 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibu. 
«/div» 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 
<ul> 


<li>List item onec/li» 
<li>List item twoc/li» 
<li>List item threec/li» 
«/ul» 
«/div» 
<h3> 部 分 4«/h3» 
<div> 
<p>Cras dictum. Pellentesque habitant morbi tristique senecti 
«/div» 
«/div» 
«/div» 


«/body» 
«/html» 


[ge]: 


非 目 动 高 度 


设置 heightStyle: "content" ， 让 折 受 面板 保持 它们 初始 的 高 度 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI fm (Accordion) - 非 自动 高 度 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#accordion" ).accordion({ 
heightStyle: "content" 
3); 
3); 
«/script» 
«/head» 
«body» 


«div id="accordion"> 
<h3> 部 分 1«/h3» 
<div> 
<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam m: 
</div> 
<h3> 部 分 2</h3> 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulur 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Qi 
<ul> 


<li>List 
«li»List 
«li»List 
«li»List 
«li»List 
«li»List 
«li»List 
«/ul» 


item</1i> 
item</1i> 
item</1i> 
item</1i> 
item</1i> 
item</1i> 
item</1i> 


</div> 
</div> 


</body> 
</html> 
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mi ABR ARO ASTERROWAR, MRA n (tabs) 一 样 。 您 可 以 
eSB Bir SEN SOW ER BSHET ELA RO AS 


基本 的 HTML 标记 是 一 系列 的 标题 (H3 标签 ) MAAR div， 因 此 内 容 不 用 通过 
JavaScript 即 可 用 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI jdm (Accordion) - 48$} </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#accordion" ).accordion( { 
event: "click hoverintent" 
3); 
3); 


VA 
* hoverIntent | Copyright 2011 Brian Cherne 
* http://cherne.net/brian/resources/jquery.hoverIntent.html 
* modified by the jQuery UI team 
SA 
$.event.special.hoverintent - ( 
setup: function() ( 
$( this ).bind( "mouseover", jQuery.event.special.hoverintent 
ty 
teardown: function() { 
$( this ).unbind( "mouseover", jQuery.event.special.hoverinte 
ty 
handler: function( event ) { 
var currentX, currentY, timeout, 
args - arguments, 
target - $( event.target ), 
previousX = event.pagex, 
previousY = event.pageY; 


function track( event ) { 
currentX = event.pageX; 
currentY - event.pageY; 


Hh 


function clear() { 
target 
.unbind( "mousemove", track ) 
.unbind( "mouseout", clear ); 
clearTimeout( timeout ); 


j 


function handler() { 
var prop, 
orig = event; 


if ( ( Math.abs( previousX - currentX ) + 
Math.abs( previousY - currentY ) ) < 7 ) { 
clear(); 


event - $.Event( "hoverintent" ); 
for ( prop in orig ) { 
if ( !( prop in event ) ) { 
event[ prop ] = orig[ prop ]; 
} 


j 
// 防止 访问 原始 事件 ， 因 为 新 事件 会 被 异步 触发 ， 旧 事件 不 再 可 用 (#6028 
delete event.originalEvent; 


target.trigger( event ); 


) else { 

previousX - currentX; 

previousY - currentY; 

timeout - setTimeout( handler, 100 ); 
} 


} 


timeout = setTimeout( handler, 100 ); 
target.bind({ 
mousemove: track, 
mouseout: clear 
}); 
J; 
J; 
</script> 
</head> 
<body> 


<div id="accordion"> 

<h3> 部 分 1</h3> 

<div> 
<p> 
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quar 
ut neque. Vivamus nisi metus, molestie vel, gravida in, condime 
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin vive 
odio. Curabitur malesuada. Vestibulum a velit eu ante sceleris 
</p> 

</div> 

<h3> 部 分 2</h3> 

<div> 
<p> 
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum s: 
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris tur[ 
velit, faucibus interdum tellus libero ac justo. Vivamus non qt 


suscipit faucibus urna. 
</p> 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p> 
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quis 
Phasellus pellentesque purus in massa. Aenean in pede. Phasellt 
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magn: 
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus ve 
</p> 
<ul> 
<li>List item one</1li> 
<li>List item twoc/li» 
<li>List item three</li> 
</ul> 
</div> 
<h3> 部 分 4</h3> 
<div> 
<p> 
Cras dictum. Pellentesque habitant morbi tristique senectus et 
et malesuada fames ac turpis egestas. Vestibulum ante ipsum pr: 
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean 
mauris vel est. 
</p> 
<p> 
Suspendisse eu nisl. Nullam ut libero. Integer dignissim conset 
Class aptent taciti sociosqu ad litora torquent per conubia no: 
inceptos himenaeos. 
</p> 
</div> 
</div> 


</body> 
</html> 
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排序 (Sortable) 
拖 搜 标题 来 给 面板 重新 排序 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI } mtr (Accordion) - 排序 (Sortable) </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
/* 当 排 序 时 ，IE 存在 布局 问题 (AA #5413) */ 
.group { zoom: 1 } 
</style> 
<script> 
$(function() { 

$( "#accordion" ) 

.accordion({ 
header: "> div > h3" 


}) 
.sortable({ 
axe ay. 
handle: "h3", 
stop: function( event, ui ) { 
// 当 排 序 时 ，IE 不 能 注册 blur， 所 以 触发 focusout 义理 程序 来 移 除 
ui.item.children( "h3" ).triggerHandler( "focusout" ); 


} 
134 
197; 


«/script» 
«/head» 
«body» 


«div id="accordion"> 
«div class="group"> 
<h3> 部 分 1«/h3» 
<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, 
</div> 
</div> 
<div class="group"> 
<h3> 部 分 2</h3> 
<div> 
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibu. 
«/div» 
«/div» 
«div class="group"> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 
<ul> 
<li>List item one</li> 
<li>List item two</li> 
<li>List item three</li> 
</ul> 
</div> 
</div> 
<div class="group"> 
<h3> 部 分 4</h3> 
<div> 
<p>Cras dictum. Pellentesque habitant morbi tristique senectt 
</div> 
</div> 


</div> 


</body> 
</html> 
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jQuery UI 实例 - 目 动 完 成 (Autocomplete) 


根据 用 户 输入 值 进 行 搜索 和 过 滤 ， 让 用 户 快速 找到 并 从 预 设 值 列 表 中 选择 。 


如 需 了 解 更 多 有 关 autocomplete 部 件 的 细节 ， 请 查看 API 文档 自动 完成 部 件 
(Autocomplete Widget) 。 


默认 功能 
当 您 在 输入 域 中 输入 时 ， 自 动 完成 (Autocomplete) 部 件 提 供 相应 的 建议 。 在 本 实 


例 中 ， 提 供 了 编程 语言 的 建议 选项 ， 您 可 以 输入 "ja" 党 斌 一下， 可 以 得 到 Java 或 
JavaScript。 


数据 源 是 一 个 简单 的 JavaScript 数组 ， 使 用 source 选项 提供 给 部 件 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Basem (Autocomplete) - 默认 功能 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var availableTags - [ 
"ActionScript", 
"AppleScript", 
"Asp", 
"BASIC", 
iion 
MOIS 
"Clojure", 
"COBOL", 
"ColdFusion", 
"Erlang", 
"Fortran", 
"Groovy", 
"Haskell", 
"Java", 
"JavaScript", 
"E3sp*. 
"Perl", 
"PHP", 
"Python", 
"Ruby", 
"Scala", 
"Scheme" 
]; 
$( "#tags" ).autocomplete({ 
source: availableTags 
3); 
3); 
</script> 
</head> 
<body> 


«div class="ui-widget"> 
«label for="tags">%% € : </label> 
<input id="tags"> 

</div> 


</body> 
</html> 








包含 重音 


autocomplete 域 使 用 自 定 义 的 source 选项 来 匹配 带 有 重音 字符 的 结果 项 ， 即 使 文 
本 域 不 包含 重音 字符 也 会 匹配 。 但 是 如 果 您 在 文本 域 中 键入 了 重音 字符 ， 则 不 会 显 
示 非 重音 的 结果 项 。 


党 试 键 人 "Jo", 会 看 到 "John" 和 "J?rn", 然后 键 人 "07 只 会 看 至 


I| "J?rn", 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI B#asem (Autocomplete) - 包含 重音 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

var names = [ "J?rn Zaefferer", "Scott Gonzalez", "John Resig" 


var accentMap = { 
Uu jiu 
Wp Wo 
}; 
var normalize = function( term ) { 
var ret = ""; 
for ( var i = 0; i < term.length; i++ ) { 
ret += accentMap[ term.charAt(i) ] || term.charAt(i); 
} 
return ret; 
}; 


$( "#developer" ).autocomplete({ 
source: function( request, response ) { 
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( rt 
response( $.grep( names, function( value ) { 


value = value.label || value.value || value; 
return matcher.test( value ) || matcher.test( normalize( 
3) ); 
j 
3); 
3); 
«/script» 
</head> 
<body> 


«div class="ui-widget"> 
<form> 
«label for="developer"># KAR : </label> 
«input id="developer"> 
</form> 
</div> 


</body> 
</html> 








分 类 的 搜索 结果 。 尝 试 键入 "a" SX "n", 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 分 类 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete-category { 
font-weight: bold; 
padding: .2em .4em; 
margin: .8em © .2em; 
line-height: 1.5; 
} 
</style> 
<script> 
$.widget( "custom.catcomplete", $.ui.autocomplete, { 
_renderMenu: function( ul, items ) { 
var that = this, 


currentCategory = ""; 
$.each( items, function( index, item ) { 
if ( item.category != currentCategory ) { 


ul.append( "<li class='ui-autocomplete-category'>" + iter 
currentCategory = item.category; 
} 
that._renderItemData( ul, item ); 
31); 
} 
p); 
</script> 
<script> 
$(function() { 
var data = [ 


label: "anders", category: "" }, 
label: "andreas", category: "" }, 
label: "antal", category: "" }, 


label: "annhhx10", category: "Products" }, 

label: "annk K12", category: "Products" }, 

label: "annttop C13", category: "Products" }, 
label: "anders andersson", category: "People" }, 
label: "andreas andersson", category: "People" }, 
label: "andreas johnson", category: "People" } 


c^ c cm c nS cS ocn oca 


1; 


$( "#search" ).catcomplete({ 


delay: 0, 
source: data 
H); 
1); 
«/script» 
«/head» 
«body» 


«label for="search"> 搜 索 : </label> 
«input id-"search'"» 


«/body» 
«/html» 
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组 合 框 (Combobox) 


一 个 由 Autocomplete 和 Button 创建 的 自 定 义 部 件 。 您 可 以 键 人 一 些 字符 ， 来 获得 
基于 您 的 输入 过 滤 的 结果 ， 或 者 使 用 按钮 从 完整 列表 中 选择 。 


该 输入 是 从 一 个 已 有 的 select 元 素 中 读 取 ， 传 递 给 带 有 自 定 义 的 source 选项 的 
Autocomplete。 


这 是 一 个 不 被 支持 的 不 完美 的 部 件 。 这 里 纯粹 是 为 了 演示 autocomplete 定制 功 
能 。 如 需 了 解 更 多 有 关 该 部 件 工 作 原 理 的 细节 ， 请 点 击 这 里 查看 相关 的 jQuery X 


eS 
E, 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 组 合 框 (Combobox) </titl 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.custom-combobox { 
position: relative; 
display: inline-block; 


.custom-combobox-toggle { 
position: absolute; 
top: 0; 
bottom: 0; 
margin-left: -1px; 
padding: 0; 

/* 支持 : IET */ 
*height: 1.7em; 
*top: 0.1em; 


j 


.custom-combobox-input { 
margin: 0; 
padding: 0.3em; 

} 


</style> 

<script> 

(function( $ ) { 

$.widget( "custom.combobox", { 
create: function() (1 
this.wrapper = $( "<span>" ) 

.addClass( "custom-combobox" ) 
.insertAfter( this.element ); 


this.element.hide(); 
this. createAutocomplete(); 
this. createShowAllButton(); 


_createAutocomplete: function() { 
var selected = this.element.children( ":selected" ), 
value = selected.val() ? selected.text() : ""; 


this.input = $( "<input>" ) 
.appendTo( this.wrapper ) 
.val( value ) 


sea EIS LIU MA 
.addClass( "custom-combobox-input ui-widget ui-widget-cor 
.autocomplete({ 

delay: 0, 


minLength: 0, 

source: $.proxy( this, "_source" ) 
3) 
.tooltip(1 
tooltipClass: "ui-state-highlight" 


3); 


this._on( this.input, { 
autocompleteselect: function( event, ui ) { 
ui.item.option.selected = true; 
this._trigger( "select", event, { 
item: ui.item.option 
}); 
3 


autocompletechange: " removeIfInvalid" 


3): 
}, 


_createShowAllButton: function() { 
var input = this.input, 
wasOpen = false; 


$ ( "ca" ) 
.attr( "tabIndex", -1 ) 
.attr( "title", "Show All Items" ) 
.tooltip() 
.appendTo( this.wrapper ) 
.button({ 
icons: { 
primary: "ui-icon-triangle-1-s" 
}, 
text: false 
3) 
.removeClass( "ui-corner-all" ) 
.addClass( "custom-combobox-toggle ui-corner-right" ) 
.mousedown(function() { 
wasOpen - input.autocomplete( "widget" ).is( ":visible' 
3) 
.click(function() ( 
input.focus(); 


// 如 果 已 经 可 见 则 关闭 
if ( wasOpen ) { 


return; 
} 
// 传递 空 字符 串 作为 搜索 的 值 ， 显 示 所 有 的 结 
input.autocomplete( "search", "n ); 
3); 


ty 


_source: function( request, response ) { 
var matcher = new RegExp( $.ui.autocomplete.escapeRegex (rec 
response( this.element.children( "option" ).map(function() 
var text - $( this ).text(); 
if ( this.value && ( !request.term || matcher.test(text) 
return ( 
label: text, 
value: text, 
option: this 
3 
3) ); 
ty 


.removelfInvalid: function( event, ui ) { 


// 选择 一 项 ， 不 执行 其 他 动作 

if ( ui.item ) { 
return; 

} 


// 搜索 一 个 匹配 (不 区 分 大 小 写 ) 

var value = this.input.val(), 
valueLowerCase = value.toLowerCase(), 
valid = false; 


this.element.children( "option" ).each(function() { 
if ( $( this ).text().toLowerCase() === valueLowerCase ) 
this.selected = valid = true; 
return false; 
} 
}); 


// 找到 一 个 匹配 ， 不 执行 其 他 动作 
if ( valid ) { 


return; 
} 
// 移 除 无 效 的 值 
this.input 
; val( n" ) 
.attr( "title", value + " didn't match any item" ) 
.tooltip( "open" ); 
this.element.val( "" ); 
this. delay(function() { 
this.input.tooltip( "close" ).attr( "title". "" ); 
jJ, 2500 ); 
this.input.data( "ui-autocomplete" ).term = ""; 
ty 


_destroy: function() { 
this.wrapper.remove(); 
this.element.show(); 

j 

3); 
3)( jQuery ); 


$(function() { 
$( "#combobox" ).combobox(); 
$( "#toggle" ).click(function() { 
$( "#combobox" ).toggle(); 
3); 
3); 
</script> 
</head> 
<body> 


«div class="ui-widget"> 

<label> 您 喜欢 的 编程 语言 : </label> 

<select id="combobox"> 
«option value=""> 请 选择.. .</option> 
<option value="ActionScript">ActionScript</option> 
<option value="AppleScript">AppleScript</option> 
<option value="Asp">Asp</option> 
<option value="BASIC">BASIC</option> 
<option value="C">C</option> 
<option value="C++">C++</option> 
<option value="Clojure">Clojure</option> 
<option value="COBOL">COBOL</option> 


<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
</select> 
</div> 


value="ColdFusion">ColdFusion</option> 
value="Erlang">Erlang</option> 
value="Fortran">Fortran</option> 
value="Groovy">Groovy</option> 
value="Haskell">Haskell</option> 
value="Java">Java</option> 
value="JavaScript">JavaScript</option> 
value="Lisp">Lisp</option> 
value="Per1">Perl</option> 
value="PHP">PHP</option> 
value="Python">Python</option> 
value="Ruby">Ruby</option> 
value="Scala">Scala</option> 
value="Scheme">Scheme</option> 


«button id="toggle"> 显 示 基 础 的 选择 框 </button> 


</body> 
</html> 
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目 定 义 数 据 并 显示 


您 可 以 使 用 自 定义 数据 格式 ， 并 通过 简单 地 重 载 默认 的 聚焦 和 选择 行为 来 显示 数 


据 。 


尝试 键入 多， 或 者 按 向 下 箭头 按键 ， 即 可 得 到 一 个 项 目 列表 。 


<!doctype html> 
<html lang="en"> 


<head> 


<meta charset="utf-8"> 

<title>jQuery UI 自动 完成 (Autocomplete) - 自 定义 数据 并 显示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 


#project-label { 


display: 


block; 


font-weight: bold; 
margin-bottom: 1em; 


} 


#project-icon { 
float: left; 


height: 


32px; 


width: 32px; 


} 


#project-description { 


margin: 0; 
padding: 0; 
} 
</style> 
<script> 
$(function() { 
var projects = [ 
if 
value: "jquery", 
label: "jQuery", 
desc: "the write less, do more, JavaScript library", 
icon: "jquery_32x32.png" 
i 
{ 
value: "jquery-ui", 
label: "jQuery UI", 
desc: "the official user interface library for jQuery", 
icon: "jqueryui_32x32. png" 
}, 
1 


value: "sizzlejs", 
label: "Sizzle JS", 
desc: "a pure-JavaScript CSS selector engine", 
icon: "sizzlejs 32x32.png" 
j 
l; 


$( "#project" ).autocomplete({ 

minLength: 0, 

source: projects, 

focus: function( event, ui ) { 
$( "#project" ).val( ui.item.label ); 
return false; 

}, 

select: function( event, ui ) { 
$( "#project" ).val( ui.item.label ); 
$( "#project-id" ).val( ui.item.value ); 
$( "#project-description" ).html( ui.item.desc ); 
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon 


return false; 


} 
}) 


.data( "ui-autocomplete" )._renderItem = function( ul, item ) + 
return $( "<li>" ) 
-append( "<a>" + item.label + "<br>" + item.desc + "</a>" ` 
.appendTo( ul ); 
}; 
3); 
«/script» 
«/head» 
«body» 


<div id="project-label"> 选 择 一 个 项 目 ( 请 键入 "j") : </div> 

<img id="project-icon" oma on a ne ic ina class="Ui-: 
<input id="project"> 

<input type="hidden" id="project-id"> 

<p id="project-description"></p> 


</body> 
</html> 


«| = 








多 个 值 


Mp 键入 一 些 字 符 ， 比 如 ""， 可 以 看 到 相关 的 编程 语言 结果 。 选 择 一 个 值 ， 然 后 
续 续 键 人 字符 来 添加 其 他 的 值 。 


本 实例 演示 如 何 使 用 source 选项 和 一 些 事件 来 实现 在 一 个 单一 的 文本 域 输入 多 个 
自动 完成 的 值 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 多 个 值 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var availableTags = [ 
"ActionScript", 
"AppleScript", 
"Asp", 
"BASIC", 
OE 
UC ERUF 
"Clojure", 
"COBOL", 
"ColdFusion", 
"Erlang", 
"Fortran", 
"Groovy", 
"Haskell", 
"Java", 
"JavaScript", 
BS 
"Perl", 
"PHP", 
"Python", 
"Ruby", 


"Scala", 
"Scheme" 
]; 
function split( val ) { 
return val.split( /,\s*/ ); 
} 


function extractLast( term ) { 
return split( term ).pop(); 


} 
$( "#tags" ) 
// 当选 择 一 个 条 目 时 不 离开 文本 域 
.bind( "keydown", function( event ) { 
if ( event.keyCode --- $.ui.keyCode.TAB && 
$( this ).data( "ui-autocomplete" ).menu.active ) ( 
event.preventDefault(); 
} 
3) 
.autocomplete({ 
minLength: 0, 
source: function( request, response ) { 
// 回 到 autocomplete， 但 是 提取 最 后 的 条 目 
response( $.ui.autocomplete.filter( 
availableTags, extractLast( request.term ) ) ); 
}, 
focus: function() { 
// 防止 在 获得 焦点 时 插入 值 
return false; 
}, 
select: function( event, ui ) { 
var terms = split( this.value ); 
// 移 除 当前 输入 
terms.pop(); 
// 添加 被 选项 
terms.push( ui.item.value ); 
// 添加 占 位 符 ， 在 结尾 添加 有 逗号 + 空格 
terms.push( "" ); 
this.value - terms.join( ", " ); 
return false; 
} 
3); 
1); 
«/script» 
«/head» 
«body» 


«div class="ui-widget"> 
«label for="tags"> 编 程 语言 : «/label» 
<input id="tags" size="50"> 

</div> 


</body> 
</html> 








用 法 : 键入 至 少 两 个 字符 来 获取 乌 的 名 称 。 选 择 一 个 值 ， 然 后 继续 键入 字符 来 添加 


其 他 的 值 。 


本 实例 演示 如 何 使 用 source 选项 和 一 些 事件 来 实现 在 一 个 单一 的 文本 域 输入 多 个 
自动 完成 的 值 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 多 个 值 ， 远 程 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete-loading { 

background: white url('images/ui-anim basic 16x16.gif') right « 


</style> 
<script> 
$(function() { 
function split( val ) { 
return val.split( /,\s*/ ); 
} 
function extractLast( term ) { 
return split( term ).pop(); 


} 


$( "#birds" ) 
// 当选 择 一 个 条 目 时 不 离开 文本 域 
.bind( "keydown", function( event ) { 
if ( event.keyCode === $.ui.keyCode.TAB && 
$( this ).data( "ui-autocomplete" ).menu.active ) { 
event.preventDefault(); 


} 
}) 


.autocomplete({ 

source: function( request, response ) { 

$.getJSON( "search.php", { 
term: extractLast( request.term ) 

}, response ); 

tr 

search: function() { 
// 自 定义 最 小 长 度 
var term = extractLast( this.value ); 


if ( term.length « 2 ) ( 
return false; 
} 
ty 


focus: function() { 
// 防止 在 获得 焦点 时 插入 值 
return false; 

}, 

select: function( event, ui ) { 
var terms = split( this.value ); 
// 移 除 当前 输入 
ps pop(); 

/ 添加 被 选项 
terns push( ui.item.value ); 
/ 添加 占 位 符 ， 在 结 尾 添加 至 号 + 空格 

ane push( "" ); 
this.value - terms.join( ", " ); 
return false; 

} 

1); 
1); 
«/script» 
«/head» 
«body» 


«div class="ui-widget"> 
«label forz"birds"» 5: </label> 
«input id="birds" size="50"> 
</div> 


</body> 
</html> 


4] — 一 路 


远程 JSONP 数据 源 


当 您 在 文本 域 中 键入 字符 时 ，Autocomplete 部 件 给 出 建议 结果 。 在 本 实例 中 ， 当 您 
在 文本 域 中 至 少 键入 两 个 字符 时 ， 将 显示 相关 城市 的 名 称 。 


在 本 实例 中 ， 数 据 源 是 geonames. org webservice。 虽 然 选择 一 个 元 素 后 文本 域 中 
是 该 城市 名 称 ， 但 是 会 显示 更 多 的 信息 以 便 找到 正确 的 条 目 。 数 据 也 可 以 回调 ， 显 
示 在 下 面 的 结果 框 中 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 远程 JSONP 数据 源 </title 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 


«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


<lin 


k rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
.Ui-autocomplete-loading { 
background: white url('images/ui-anim basic 16x16.gif') right « 


} 


#city { width: 25em; } 
</style> 
<script> 


$(fu 
fu 


nction() { 
nction log( message ) { 


$( "<div>" ).text( message ).prependTo( "#log" ); 
$( "#log" ).scrollTop( 0 ); 


} 
$( 


}) 
}); 


</SC 
</head 
<body> 


"#city" ).autocomplete({ 
source: function( request, response ) { 
$.ajax({ 
url: "http://ws.geonames.org/searchJSON", 
dataType: "jsonp", 
data: { 
featureClass: "P", 
style: "full", 
maxRows: 12, 
name startsWith: request.term 
i 
success: function( data ) { 
response( $.map( data.geonames, function( item ) { 
return { 
label: item.name + (item.adminNamei1 ? ", " + item.: 
value: item.name 


p); 
} 
H); 
}, 
minLength: 2, 
select: function( event, ui ) { 
log( ui.item ? 
"Selected: " + ui.item.label : 
"Nothing selected, input was " + this.value); 
}, 
open: function() { 
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-cortr 
}, 
close: function() { 
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corr 


j 


, 


ript» 
> 


«div class="ui-widget"> 

«label for="city"> 您 的 城市 : </label> 

<input id="city"> 

Powered by «a href="http://geonames.org" target="_blank">geoname: 
</div> 


<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
结 
<div id="log" style="height: 200px; width: 300px; overflow: auto, 
</div> 


</body> 
</html> 





远程 数据 源 


当 您 在 文本 域 中 键入 字符 时 ，Autocomplete 部 件 给 出 建议 结果 。 在 本 实例 中 ， 当 您 
在 文本 域 中 至 少 键入 两 个 字符 时 ， 笃 显示 相关 乌 的 名 称 。 


在 本 实例 中 ， 数 据 源 是 可 返回 JSON 数据 的 服务 器 端 脚本 ， 一 个 简单 的 
source 选项 来 指定 。 另外 ，minLength 选项 设置 为 2， eae ai 反 回 太 多 的 结果 ， 
select SHHT eRe Bite 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 远程 数据 源 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete-loading { 
background: white url('images/ui-anim basic 16x16.gif') right « 
J 
</style> 
<script> 
$(function() { 
function log( message ) { 
$( "<div>" ).text( message ).prependTo( "#log" ); 
$( "#log" ).scrollTop( 0 ); 
} 


$( "#birds" ).autocomplete({ 
source: "search.php", 
minLength: 2, 
select: function( event, ui ) { 
log( ui.item ? 
"Selected: " + ui.item.value + " aka " + ui.item.id 
"Nothing selected, input was " + this.value ); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div class="ui-widget"> 
«label for="birds"> 乌 : </label> 
<input id="birds"> 
</div> 
«div class-"ui-widget" style="margin-top:2em; font-family:Arial"> 
结 未 : 
<div id="log" style="height: 200px; width: 300px; overflow: auto, 
</div> 


</body> 
</html> 


«| BR 








当 您 在 文本 域 中 键入 字符 时 ，Autocomplete 部 件 给 出 建议 结果 。 在 本 实例 中 ， 当 您 
在 文本 域 中 至 少 键 人 两 个 字符 时 ， 将 显示 相关 乌 的 名 称 。 


为 了 提高 性 能 ， 这 里 添加 了 一 些 本 地 缓存 ， 其 他 与 远程 数据 源 实 例 相 似 。 在 这 里 
缓存 只 保存 了 一 Q2 vcn suc ai Es 个 值 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 远程 缓存 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete-loading { 

background: white url('images/ui-anim basic 16x16.gif') right « 


</style> 
<script> 
$(function() { 
var cache = {}; 
$( "#birds" ).autocomplete({ 
minLength: 2, 
source: function( request, response ) { 
var term = request.term; 
if ( term in cache ) { 
response( cache[ term ] ); 
return; 


j 


$.getJSON( "search.php", request, function( data, status, > 
cache[ term ] = data; 
response( data ); 
3); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div class="ui-widget"> 
«label forz"birds"» 5: </label> 
«input id="birds"> 

«/div» 


«/body» 
«/html» 








可 滚动 的 结果 


当 显 示 一 个 长 列表 的 选项 时 ， 您 可 以 简单 地 为 autocomplete 菜单 设置 max-height 
来 防止 菜单 显示 太 长 。 党 试 键入 "a" 或 "s" 来 获得 一 个 可 滚动 的 长 列表 的 结果 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - 可 滚动 的 结果 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-autocomplete { 
max-height: 100px; 
overflow-y: auto; 
/* 防止 水 平 滚动 条 */ 
overflow-x: hidden; 


} 
/* IE 6 不 支持 max-height 
* 我 们 使 用 height 代替 ， 但 是 这 会 强制 菜单 总 是 显示 为 那个 高 度 
ura 
* html .ui-autocomplete { 
height: 100px; 


</style> 

<script> 

$(function() { 

var availableTags - [ 

"ActionScript", 
"AppleScript", 
"Asp" : 
"BASIC", 
WEN F 
We : 
"Clojure", 
"COBOL", 
"ColdFusion", 
"Erlang", 
"Fortran", 
"Groovy", 
"Haskell", 
"Java", 
"JavaScript", 
aliis pi 7 
"Perl", 
"DHP" > 
"Python", 
"Ruby" > 


"Scala", 
"Scheme" 


]; 
$( "#tags" ).autocomplete({ 
source: availableTags 


}); 
}); 
</script> 
</head> 
<body> 


<div class="ui-widget"> 
«label for="tags"> 标 签 : </label> 
<input id="tags"> 

</div> 


</body> 
</html> 


mi — — E 


XML 数据 

本 实例 演示 如 何 获 取 一 些 XML 数据 ， 并 使 用 jQuery 的 方法 解析 它 ， 然 后 把 它 提供 
给 autocomplete 作为 数据 源 。 

本 实例 也 可 作为 解析 远程 XML 数据 源 的 参考 - 解析 在 每 次 source 回调 请 求 时 发 


o 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 自动 完成 (Autocomplete) - XML 数据 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.ui-autocomplete-loading { background: white url('images/ui-anim 
</style> 
<script> 
$(function() { 
function log( message ) { 
$( "<div/>" ).text( message ).prependTo( "#log" ); 
$( "#log" ).attr( "scrollTop", © ); 
} 


$.ajax({ 
url: "london.xml", 
dataType: "xml", 


success: function( xmlResponse ) { 
var data = $( "geoname", xmlResponse ).map(function() { 


return { 
value: $( "name", this ).text() + ", " + 
( $.trim( $( "countryName", this ).text() ) || "(unkr 
id: $( "geonameId", this ).text() 
3 
3)-get(); 


$( "#birds" ).autocomplete({ 
source: data, 
minLength: 0, 
select: function( event, ui ) { 
log( ui.item ? 
"Selected: " + ui.item.value + ", geonameId: " + ui.: 
"Nothing selected, input was " + this.value ); 
} 
}); 
} 
}); 
3); 
«/script» 
«/head» 
«body» 


«div class="ui-widget"> 
«label for="birds">London 匹配 : </label> 
«input id="birds"> 

«/div» 


«div class-"ui-widget" style-"margin-top:2em; font-family:Arial"> 
结 未 : 
<div id="log" style="height: 200px; width: 300px; overflow: auto, 
</div> 


</body> 
</html> 





jQuery UI 实例 - #242 (Button) 


用 带 有 适当 的 悬 停 (hover) 和 激活 (active) 的 样式 的 可 主题 化 按钮 来 加 强 标准 表 
单元 素 (比如 按钮 、 输 入 框 、 锚 ) 的 功能 。 


如 需 了 解 更 多 有 关 button 部 件 的 细节 ， 请 查看 API 文档 按钮 部 件 (Button 
Widget) 。 


默认 功能 


可 用 于 按钮 的 标记 实例 : — button 元 素 ， 一 个 类 型 为 submit 的 input 元素 和 一 


个 锚 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 默认 功能 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "input[type=submit], a, button" ) 
.button() 
.click(function( event ) { 
event.preventDefault(); 
3); 
3); 
</script> 
</head> 
<body> 


<button>—* button 元 素 </button> 
«input type="submit" value=" 一 个 提交 按钮 "> 
«a href="#"> 一 个 锚 </a> 


</body> 
</html> 








复 选 框 


通过 button 部 件 把 复 选 框 显示 为 切换 按钮 样式 。 与 复 选 框 相关 的 label 元 素 作为 按 
钮 文本 。 


本 实例 通过 在 一 个 公共 的 容器 上 调用 .buttonset() ， 演 示 了 三 个 显示 为 按钮 样 
式 的 复 选 框 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 复 选 框 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#check" ).button(); 
$( "#format" ).buttonset(); 
3); 
</script> 
<style> 
#format { margin-top: 2em; } 
</style> 
</head> 
<body> 


<input type="checkbox" id="check"><label for="check">t)i#</label> 


<div id="format"> 
<input type="checkbox" id="checki"><label for="checki">B</label> 
<input type="checkbox" id="check2"><label for="check2">I</label> 
<input type="checkbox" id="check3"><label for="check3">U</label> 
</div> 


</body> 
</html> 
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有 文本 和 图 标的 各 种 组 合 的 按钮 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 图 标 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "button:first" ).button({ 
icons: { 
primary: "ui-icon-locked" 
tr 
text: false 
}).next().button({ 
icons: { 
primary: "ui-icon-locked" 


}).next().button({ 
icons: { 
primary: "ui-icon-gear", 
secondary: "ui-icon-triangle-1-s" 


} 
}).next().button({ 
icons: { 
primary: "ui-icon-gear", 
secondary: "ui-icon-triangle-1-s" 
3 
text: false 
3); 
3); 
</script> 
</head> 
<body> 


<button> 只 带 有 图 标的 按钮 </button> 
<button> 图 标 在 左 侧 的 按钮 </button> 
<button> 带 有 两 个 图 标的 按钮 </button> 
<button> 带 有 两 个 图 标 且 不 带 文本 的 按钮 </button> 


</body> 
</html> 





单 选 
三 个 单 选 按钮 转变 为 一 套 按钮 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - ##%</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#radio" ).buttonset(); 
3); 
</script> 
</head> 
<body> 


«form» 
«div id="radio"> 
<input type="radio" id="radioi" name="radio"><label for="radio: 
<input type="radio" id="radio2" name="radio" checked="checked": 
<input type="radio" id="radio3" name="radio"><label for-'radio: 
</div> 
</form> 


</body> 
</html> 


i B 


分 割 按钮 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 分 割 按钮 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.Ui-menu { position: absolute; width: 100px; } 
</style> 
<script> 
$(function() { 
$( "#rerun" ) 
.button() 
.click(function() ( 
alert( "Running the last action" ); 


}) 
.Next() 


.button({ 
text: false, 
icons: { 
primary: "ui-icon-triangle-1-s" 


) 
.Click(function() { 
var menu = $( this ).parent().next().show().position({ 
my: "left top", 
at: "left bottom", 
of: this 
}); 
$( document ).one( "click", function() { 
menu.hide(); 


31); 
return false; 
3) 
.parent() 
.buttonset() 
,next() 
.hide() 
.menu( ); 
31); 
«/script» 
«/head» 
«body» 
«div» 
«div» 
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«button id="rerun"> 运 行 最 后 的 动作 </button> 
«button id="select"> 选 择 一 个 动作 </button> 
</div> 
<ul> 
<li><a href="#"> 打 开 .. .</a></1i> 
<li><a href="#"> 保 存 </a></1i> 
<li><a href="#">HlBR</a></1i> 
</ul> 
</div> 


</body> 
</html> 
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TA 


一 个 多 媒体 播放 器 的 工具 栏 。 请 看 基础 的 标记 : — button 3R, Shuffle 按钮 是 
一 个 类 型 为 checkbox 的 input, Repeat 选项 是 三 个 类 型 为 radio 的 input, 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 按钮 (Button) - 工具 栏 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#toolbar { 
padding: 4px; 
display: inline-block; 
} 
/* support: IE7 */ 
*+html #toolbar { 
display: inline; 
} 
</style> 
<script> 
$(function() { 
$( "#beginning" ).button({ 
text: false, 


icons: { 
primary: "ui-icon-seek-start" 
} 
3); 


$( "#rewind" ).button({ 
text: false, 


icons: { 
primary: "ui-icon-seek-prev" 
j 
3); 


$( "#play" ).button({ 
text: false, 
icons: { 
primary: "ui-icon-play" 
} 


}) 
.Click(function() { 


var options; 
if ( $( this ).text() === "play" ) { 
options = { 
label: "pause", 
icons: { 
primary: "ui-icon-pause" 
} 


3 
) else { 
options - ( 
label: "play", 
icons: { 


primary: "ui-icon-play" 


} 
}; 
} 
$( this ).button( "option", options ); 
3); 


$( "#stop" ).button({ 
text: false, 
icons: { 
primary: "ui-icon-stop" 
} 


}) 
.click(function() { 


$( "#play" ).button( "option", { 
label: "play", 


icons: { 
primary: "ui-icon-play" 
} 
}); 


}); 
$( "#forward" ).button({ 


text: false, 


icons: { 
primary: "ui-icon-seek-next" 
} 
}); 


$( "#end" ).button({ 
text: false, 


icons: { 
primary: "ui-icon-seek-end" 
} 
}); 


$( "#shuffle" ).button(); 
$( "#repeat" ).buttonset(); 
3); 
«/script» 
«/head» 
«body» 


«div id="toolbar" class="ui-widget-header ui-corner-all"> 
«button id="beginning"># 4</button> 
«button id="rewind">(®iR</button> 
«button id="play">#8iX</button> 
«button id="stop">{#1E</button> 
«button id="forward">(Ri#</button> 
«button id="end">2</button> 


<input type="checkbox" id="shuffle"><label for="shuffle">Shuffle< 


«span id="repeat"> 
<input type="radio" id="repeatO" name="repeat" checked="checkec 
<input type="radio" id="repeati" name="repeat"><label for="repe 
<input type="radio" id="repeatall" name="repeat"><label for="re 


</span> 
</div> 


</body> 
</html> 
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'Attr.nodeValue' is deprecated. Please use 'value' instead. adsbygoogle.js:32 href 
http://www.wscschool.cc/jqueryui/example-datepicker.html example- 
datepicker.html:438 tmp url http://www.w3cschool.cc/jqueryui/example- 
datepicker.html example-datepicker.html:450 example-button.html jQuery UI 实例 
— #¥42 (Button) example-datepicker.html:495 example-dialog.html jQuery UI 3: 
例 — 对 话 框 (Dialog) example-datepicker.html:496 


jQuery UI 实例 - 日 期 选择 器 (Datepicker) 


从 弹出 框 或 内 联 日 历 选择 一 个 日 期 。 


如 需 了 解 更 多 有 关 datepicker 部 件 的 细节 ， 请 查看 API 文档 日 期 选择 器 部 件 
(Datepicker Widget) 。 


默认 功能 


日 期 选择 器 (Datepicker) 绑 定 到 一 个 标准 的 表单 input 字段 上 。 把 焦点 移 到 input 

上 (点击 或 者 使 用 tab 键 ) ， 在 一 个 小 的 覆盖 层 上 打开 一 个 交互 日 历 。 选 择 一 个 日 

期 R 点 击 页 面 上 的 任意 地 方 (输入 框 即 失去 焦点 ) ， 或 者 点 击 Esc 键 来 关闭 。 如 果 
选择 了 一 个 日 期 ， 则 反馈 显示 为 input 的 值 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker(); 
3); 
«/script» 
</head> 
<body> 


<p>A #8 : <input type="text" id="datepicker"></p> 


</body> 
</html> 
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当 打 开 或 关闭 datepicker 时 使 用 不 同 的 动画 。 从 下 拉 框 中 选择 一 个 动画 ， 然 后 在 输 
入 框 中 点 击 来 查看 它 的 效果 。 您 可 以 使 用 三 个 标准 动画 中 任意 一 个 ， 或 者 使 用 UI 
特效 中 的 任意 一 个 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charse 
<title>jQuer 
<link rel="s 
<script src= 
<script src= 
<link rel="s 
<script> 
$(function() 
$( "#dat 
$( "sani 
$( " 
3); 
3); 
«/script» 
</head> 
<body> 


<p> 日 期 «input t 


<p> 动 男 : <br> 
<select id=" 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
</select> 
</p> 


</body> 
</html> 
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其 他 月 份 的 日 期 


t-"utf-8"» 

y UI 日 期 选择 器 (Datepicker) - 动画 </title> 
tylesheet" href="//code.jquery.com/ui/1.10.4/theme: 
"//code.jquery.com/jquery-1.9.1.js"»«/script» 
"//code.jquery.com/ui/1.10.4/jquery-ui.js"></script 
tylesheet" hrefz'http://jqueryui.com/resources/dem: 


{ 
epicker" ).datepicker(); 
m" ).change(function() { 
#datepicker" ).datepicker( "option", "showAnim", $i 


ype="text" id="datepicker" size="30"></p> 


anim"> 

value="Show">Show (#kik)</option> 
value="slideDown">## F«/option» 
value="fadeIn">A</option> 
value="blind">Blind (UI 百叶 窗 特效 )</option> 
value="bounce">Bounce (UI 反弹 特效 )</option> 
value-"clip"»Clip (UI 剪辑 特效 )</option> 
value="drop">Drop (UI 降落 特效 )</option> 
value="fold">Fold (UI #1 #4#3)</option> 
value="Slide">Slide (UI 滑动 特效 )</option> 
Value="" > 无 </option> 





datepicker 可 以 显示 其 他 月 份 的 日 期 ， 这 些 日 期 也 可 以 设置 成 可 选择 的 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 其 他 月 份 的 日 期 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
showOtherMonths: true, 
selectOtherMonths: true 
+); 
3); 
</script> 
</head> 
<body> 


<p>A #8 : <input type="text" id="datepicker"></p> 


</body> 
</html> 
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显示 按钮 栏 


通过 布尔 值 的 showButtonPanel 选项 为 选择 当天 日 期 显示 一 个 "Today" 按 钮 ， 为 
关闭 日 历 显 示 一 个 "Done" 按 纽 。 默 认 情 况 下 ， 当 按钮 栏 显 示 时 会 启用 每 个 按钮 ， 但 
是 按钮 可 通过 其 他 的 选项 进行 关闭 。 按 和 钮 文本 可 自 定义 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 显示 按钮 栏 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
showButtonPanel: true 
3): 
3); 
«/script» 
«/head» 
«body» 


<p> 日 期 : <input type="text" id-"datepicker"»«/p» 


</body> 
</html> 
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内 联 显示 


datepicker 是 庶 套 在 页 面 中 显示 ， 而 不 是 显示 在 一 个 覆盖 层 中 。 只 需要 简单 地 在 
div 上 调用 .datepicker() 即 可 ， 而 不 是 在 input 上 调用 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 内 联 显示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker(); 
3); 
</script> 
</head> 
<body> 


日 期 : <div id="datepicker"></div> 


</body> 
</html> 


e] 
显示 月 份 & 年 份 菜单 


显示 月 份 和 年 份 的 下 拉 框 ， 而 不 是 显示 静态 的 月 份 /年 份 标题 ， 这 样 便于 在 大 范围 的 
时 间 跨 度 上 和 导航。 添加 布尔 值 changeMonth 和 changeYear 选项 即 可 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 显示 月 份 &amp; 年 份 菜单 </1 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
changeMonth: true, 
changeYear: true 
3); 
3); 
«/script» 
</head> 
<body> 


<p> 日 期 «input type="text" id="datepicker"></p> 


</body> 
</html> 
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显示 多 个 月 份 


设置 numberOfMonths 选项 为 一 个 整数 2， 或 者 大 于 2 的 整数 ， 来 在 一 个 
datepicker 中 显示 多 个 月 份 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 显示 多 个 月 份 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
numberOfMonths: 3, 
showButtonPanel: true 
3): 
3); 
</script> 
</head> 
<body> 


<p> 日 期 «input type="text" id="datepicker"></p> 


</body> 
</html> 
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格 陈 化 日 期 


以 各 种 方式 显示 日 期 反馈 。 从 下 拉 框 中 选择 一 种 日 期 格式 ， 然 后 在 输入 框 中 点 击 并 
选择 一 个 日 期 ， 查 看 所 选 格式 的 日 期 显示 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 格式 化 日 期 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker(); 
$( "#format" ).change(function() { 
$( "#datepicker" ).datepicker( "option", "dateFormat", $( th: 
3): 
3): 
</script> 
</head> 
<body> 


<p> 日 期 : <input type="text" id="datepicker" size="30"></p> 


<p> 格 式 选 项 : <br> 
<select id="format"> 
<option value="mm/dd/yy">Default - mm/dd/yy</option> 
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> 
«option value="d M, y">Short - d M, y</option> 
«option value="d MM, y">Medium - d MM, y</option> 
«option value="DD, d MM, yy">Full - DD, d MM, yy</option> 
<option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the 
«/select» 
</p> 


</body> 
</html> 
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图 标 触 发 器 


点 击 输 入 框 旁边 的 图 标 来 显示 datepicker。 设 置 datepicker 在 获得 焦点 时 打开 (RÀ 
认 行 为 ) ， 或 者 在 点 击 图 标 时 打开 ， 或 者 在 获得 焦点 /点 击 图 标 时 打开 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 图 标 触 发 器 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
showOn: "button", 
buttonImage: "images/calendar.gif", 
buttonImageOnly: true 
3): 
3); 
</script> 
</head> 
<body> 


<p>A #8 : <input type="text" id="datepicker"></p> 


</body> 
</html> 


[E] 


本 地 化 日 万 


本 地 化 datepicker 日 历 语言 和 格式 (默认 为 English / Western 格式 ) 。datepicker 
包含 对 从 右 到 左 读 取 的 语言 的 内 建 支 持 ， 比 如 Arabic 和 Hebrew. 





<!doctype html> 
<html lang="en"> 


<head> 


<meta charset="utf-8"> 

<title>jQuery UI 日 期 选择 器 (Datepicker) - 本 地 化 日 历 </title> 

<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script srcz"http://jqueryui.com/resources/demos/datepicker/]jque! 
<script srcz"http://jqueryui.com/resources/demos/datepicker/jque! 
<script srcz"http://jqueryui.com/resources/demos/datepicker/]jque! 
<script src="http://jqueryui.com/resources/demos/datepicker/jque} 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<script> 


$(function() { 
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ), 
$( "#locale" ).change(function() { 
$( "#datepicker" ).datepicker( "option", 
$.datepicker.regional[ $( this ).val() ] ); 


3): 
+); 
</script> 
</head> 
<body> 


<p> 日 期 «input type="text" id="datepicker">&nbsp; 
<select id="locale"> 


«option value="ar">Arabic (&#8235; (&#1575; &#1604; &#1593; &#1585 ， 
«option value="Zh-TW">Chinese Traditional (&#32321; &#39636 ; &#2( 
<option value="">English</option> 
«option value="fr" selected="Selected">French (Fran&ccedil; ais: 
«option value="he">Hebrew (&#8235; (&#1506 ; &#1489 ; &#1512 ;&#1497, 
</select></p> 
</body> 
</html> 





填充 另 一 个 输入 框 


使 用 altField 和 altFormat 选项 ， 无 论 何 时 选择 日 期 ， 会 在 另 一 个 输入 框 中 
填充 带 有 一 定格 式 的 日 期 。 这 个 功能 通过 对 电脑 友好 性 的 日 期 进一步 加 工 后 ， 向 用 
户 呈 现 一 个 用 户 友 好 性 的 日 期 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 填充 另 一 个 输入 框 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
altField: "#alternate", 
altFormat: "DD, d MM, yy" 
3): 
3); 
«/script» 
</head> 
<body> 


<p> 日 期 : <input type="text" id="datepicker">&nbsp;<input type="text' 


</body> 
</html> 





限制 日 期 范围 


通过 minDate 和 maxDate 选项 限制 可 选择 的 日 期 范围 。 设 置 起 止 日 期 为 实际 
的 日 期 (new Date(2009, 1- 1,26)) ， 或 者 为 与 今天 的 一 个 数值 偏 移 (-20) ， 或 
者 为 一 个 周期 和 单位 的 字符 串 ('+1M +10D') 。 如 果 设 置 为 字符 串 ， 使 用 'D' 表示 
天 ， 使 用 'W' 表示 周 ， 使 用 'M' 表示 月 ， 使 用 'Y' 表示 年 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 限制 日 期 范围 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +1( 

3); 
</script> 

</head> 

<body> 


<p> 日 期 «input type="text" id="datepicker"></p> 


</body> 
</html> 
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选择 一 个 日 期 范围 


选择 要 搜索 的 日 期 范围 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 选择 一 个 日 期 范围 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "4from" ).datepicker({ 
defaultDate: "+1w", 
changeMonth: true, 
numberOfMonths: 3, 
onClose: function( selectedDate ) ( 
$( "sto" ).datepicker( "option", "minDate", selectedDate ), 
} 
}); 
$( "#to" ).datepicker({ 
defaultDate: "+1w", 
changeMonth: true, 
numberOfMonths: 3, 
onClose: function( selectedDate ) { 
$( "#from" ).datepicker( "option", "maxDate", selectedDate 
} 
}); 
}); 
</script> 
</head> 
<body> 


«label for="from">M</label> 

<input type="text" id="from" name="from"> 
«label for="to">2I</label> 

<input type="text" id="to" name="to"> 


</body> 
</html> 





显示 一 年 中 的 第 几 周 


datepicker 可 以 显示 一 年 中 的 第 几 周 。 黑 认 的 计算 是 按照 ISO 8601 定义 : BAM 
星期 一 开始 ， 每 年 的 第 一 周 包含 该 年 的 第 一 个 星期 四 。 这 就 意味 着 一 年 中 的 一 些 天 
可 能 是 属于 另 一 年 中 的 周 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 日 期 选择 器 (Datepicker) - 显示 一 年 中 的 第 几 周 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#datepicker" ).datepicker({ 
Showweek: true, 
firstDay: 1 
3); 
3); 
«/script» 
</head> 
<body> 


<p>A #8 : <input type="text" id="datepicker"></p> 


</body> 
</html> 
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jQuery UI 实例 - 对 话 框 (Dialog) 


在 一 个 交互 覆盖 层 中 打开 内 容 。 


如 需 了 解 更 多 有 关 dialog 部 件 的 细节 ， 请 查看 API 文档 对 话 框 部 件 (Dialog 
Widget) 。 


默认 功能 


基本 的 对 话 框 窗口 是 一 个 定位 于 视 区 中 的 覆盖 层 ， 同 时 通过 一 个 iframe 与 页 面 内 容 
分 隔 开 (就 像 select 元 素 ) 。 它 由 一 个 标题 栏 和 一 个 内 容 区 域 组 成 ， 且 可 以 移动 ， 
调整 尺寸 ， 上 默认 可 通过 X 图 标 关 闭 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#dialog" ).dialog(); 
3); 
«/script» 
</head> 
<body> 


«div id="dialog" title=" 基 本 的 对 话 框 "> 
<p> 这 是 一 个 默认 的 对 话 框 ， 用 于 显示 信息 。 对 话 框 窗口 可 以 移动 ， 调 整 尺寸 ， 默 认可 通 


</div> 


</body> 
</html> 





动 转 
可 以 通过 为 show/hide 属性 指定 一 个 特效 来 动画 显示 对 话 框 。 您 必须 为 想 使 用 的 特 


效 引 用 独立 的 特效 文件 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 动画 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#dialog" ).dialog({ 
autoOpen: false, 
show: { 
effect: "blind", 
duration: 1000 


}, 
hide: { 
effect: "explode", 
duration: 1000 
} 
p); 


$( "#opener" ).click(function() { 
$( "#dialog" ).dialog( "open" ); 
3); 
1); 
</script> 
</head> 
<body> 


<div id="dialog" title="Basic dialog"> 
<p> 这 是 一 个 动画 显示 的 对 话 框 ， 用 于 显示 信息 。 对 话 框 窗口 可 以 移动 ， 调 整 尺寸 ， 默 认 
</div> 


«button id="opener">t] F +t igtE</but ton> 


</body> 
</html> 





基本 的 模 态 


模 态 对 话 框 防止 用 户 与 对 话 框 以 外 的 页 面 其 他 部 分 进行 交互 ， 直 到 对 话 框 关闭 为 


o 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 基本 的 模 态 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 


$(function() { 
$( "#dialog-modal" ).dialog({ 
height: 140, 
modal: true 
3): 
3); 
«/script» 
«/head» 
«body» 


«div id-"dialog-modal" title=" 基 本 的 模 态 对 话 框 "> 
<p> 添 加 模 态 覆盖 屏幕 ， 让 对 话 框 看 起 来 更 突出 ， 因 为 它 让 页 面 上 其 他 内 容 变 暗 。</p> 
</div> 


<p>Sed vel diam id libero <a href="http://www.w3cschool.cc">rutrum 


</body> 
</html> 
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模 态 确认 


确认 一 个 动作 可 能 是 破坏 性 的 也 可 能 是 有 意义 的 。 设 置 modal 选项 为 true， 并 通 
过 buttons 选项 来 指定 主要 的 和 次 要 的 用 户 动作 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 模 态 确认 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#dialog-confirm" ).dialog({ 
resizable: false, 
height:140, 
modal: true, 
buttons: { 
"Delete all items": function() { 
$( this ).dialog( "close" ); 
ty 
Cancel: function() { 
$( this ).dialog( "close" 55 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 


«div id="dialog-confirm" title=" 清 空 回 收 站 吗 ? "> 
<p><span class="ui-icon ui-icon-alert" style="float:left; margin 
</div> 


<p>Sed vel diam id libero <a href="http://www.w3cschool.cc">rutrum 


</body> 
</html> 


ooo 
模 态 表单 
使 用 模 态 对 话 框 来 请 求 用 户 在 一 个 多 步骤 过 程 中 输入 数据 。 在 内 容 区 域 谨 入 form 


标记 ， 设 置 modal 选项 为 true， 并 通过 buttons 选项 来 指定 主要 的 和 次 要 的 
用 户 动作 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


<title>jQuery UI 对 话 框 (Dialog) - 模 态 表单 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
body { font-size: 62.5%; } 
label, input { display:block; } 
input.text { margin-bottom:12px; width:95%; padding: .4em; } 
fieldset { padding:0; border:0; margin-top:25px; } 
hi { font-size: 1.2em; margin: .6em 0; } 
div#users-contain { width: 350px; margin: 20px 0; } 
div#users-contain table { margin: 1em 0; border-collapse: coll: 
div#users-contain table td, div#users-contain table th { bordei 
.Ui-dialog .ui-state-error { padding: .3em; } 
.validateTips { border: 1px solid transparent; padding: 0.3em; 
</style> 
<script> 
$(function() { 
var name = $( "#name" ), 
email = $( "#email" ), 
password = $( "#password" ), 
allFields = $( [] ).add( name ).add( email ).add( password ), 
tips = $( ".validateTips" ); 


function updateTips( t ) { 
tips 
.text( t ) 
.addClass( "ui-state-highlight" ); 
setTimeout(function() { 
tips.removeClass( "ui-state-highlight", 1500 ); 
j, 500 ); 
j 


function checkLength( o, n, min, max ) { 
if ( o.val().length > max || o.val().length < min ) { 
o.addClass( "ui-state-error" ); 
updateTips( "" + n + " 的 长 度 必 须 在 " + 
min + 和 "+ max + "之 间 。" ); 
return false; 
} else { 
return true; 
} 
} 


function checkRegexp( o, regexp, n 
if ( !( regexp.test( o.val() ) ) 
o.addClass( "ui-state-error" ); 
updateTips( n ); 
return false; 
) else { 
return true; 


j 
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} 


$( "#dialog-form" ).dialog({ 
autoOpen: false, 
height: 300, 


width: 350, 
modal: true, 
buttons: { 


"创建 一 个 帐户 ": function() { 
var bValid = true; 
allFields.removeClass( "ui-state-error" ); 


bValid = bValid && checkLength( name, "username", 3, 16 ` 
bValid = bValid && checkLength( email, "email", 6, 80 ); 
bValid = bValid && checkLength( password, "password", 5, 
bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z ])- 


// From jquery.validate.js (by joern), contributed by Sc« 
bValid bValid && checkRegexp( email, /^((([a-z]|*Nd]| [z^ 
bValid bValid && checkRegexp( password, /^([0-9a-zA-Z]. 


if ( bvalid ) { 
$( "#users tbody" ).append( "<tr>" + 
"<td>" + name.val() + "</td>" + 
"<td>" + email.val() + "</td>" + 
"<td>" + password.val() + "</td>" + 
"c/tr»" Mes 
$( this ).dialog( "close" ); 
j 
3 


Cancel: function() ( 
$( this ).dialog( "close" ); 


} 
ty 
close: function() { 
allFields.val( "" ).removeClass( "ui-state-error" ); 
} 
3); 


$( "#create-user" ) 
.button() 
.click(function() { 
$( "#dialog-form" ).dialog( "open" ); 
3); 
3); 
«/script» 
</head> 
<body> 


«div id="dialog-form" title=" 创 建新 用 户 "> 
«p class="validateTips"> 所 有 的 表单 字段 都 是 必 填 的 。</p> 


<form> 


<fieldset> 
«label for="name">4#</label> 
<input type="text" name="name" id="name" class="text ui-widget. 
«label for="email">#%#8</label> 
<input type="text" name="email" id="email" value="" class-"texi 
«label for="password">23</label> 
<input type="password" name="password" id="password" value="" « 

</fieldset> 

</form> 

</div> 


<div id="users-contain" class="ui-widget"> 
<h1> 已 有 的 用 户 : </h1> 
<table id="users" class="ui-widget ui-widget-content"> 
<thead> 
<tr class="ui-widget-header "> 
<th> 名 字 </th> 
<th> 邮 箱 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John Doe</td> 
<td>john.doe@example.com</td> 
<td>johndoe1</td> 
</tr> 
</tbody> 
</table> 
</div> 
«button id="create-user"> 创 建新 用 户 </button> 


</body> 
</html> 





十 上 ssi 
模 态 消息 


使 用 模 态 对 话 框 来 在 下 一 步 动 作 执 行 之 前 确认 信息 和 动作 。 设 置 modal 选项 为 
true， 并 通过 buttons 选项 来 指定 主要 的 动作 (Ok). 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 对 话 框 (Dialog) - 模 态 消息 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#dialog-message" ).dialog({ 
modal: true, 
buttons: { 
Ok: function() { 
$( this ).dialog( "close" ); 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 


«div id="dialog-message" title=" FT "> 
<p> 
<span class="ui-icon ui-icon-circle-check" style="float:left; r 
您 的 文件 已 经 成 功 下载 到 文件 夹 中 。 
</p> 
<p> 
当前 使 用 存储 空间 的 <b>36%</b>, 
</p> 
</div> 


<p>Sed vel diam id libero <a href="http://ww.w3cschool.cc">rutrum 


</body> 
</html> 


IE 





jQuery UI 实例 - 32% (Menu) 


eA BT Ge & BAF S LBAT RT SE AIL 3 


如 需 了 解 更 多 有 关 menu 部 件 的 细节 ， 请 查看 API 文档 菜单 部 件 (Menu 
Widget) 。 


默认 功能 


一 个 带 有 默认 配置 、 禁 用 条 目 和 嵌 套 菜单 的 菜单 。 由 一 个 列表 转化 成 的 ， 添 加 了 主 
题 ， 并 支持 鼠标 和 键盘 交互 。 尝 试 使 用 光标 键 导航 菜单。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 菜单 (Menu) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#menu" ).menu(); 
1); 
</script> 
<style> 
.Ui-menu { width: 150px; } 
</style> 
</head> 
<body> 


«ul id="menu"> 
«li class="ui-state-disabled"><a href="#">Aberdeen</a></1i> 
<li><a href="#">Ada</a></1i> 
<li><a href="#">Adamsville</a></1li> 
<li><a href="#">Addyston</a></1i> 
<li> 
<a href="#">Delphi</a> 
<ul> 
«li class="ui-state-disabled"><a href="#">Ada</a></1li> 
<li><a href="#">Saarland</a></1i> 
<li><a href="#">Salzburg</a></1i> 
</ul> 
</li> 
<li><a href="#">Saarland</a></li> 
<li> 
<a href="#">Salzburg</a> 


<ul> 
<li> 
<a href="#">Delphi</a> 
<ul> 
<li><a href="#">Ada</a></1i> 
<li><a href="#">Saarland</a></1i> 
<li><a href="#">Salzburg</a></1i> 
</ul> 
</li> 
<li> 
<a href="#">Delphi</a> 
<ul> 
<li><a href="#">Ada</a></li> 
<li><a href="#">Saarland</a></li> 
<li><a href="#">Salzburg</a></li> 
</ul> 
</li> 
<li><a href="#">Perch</a></li> 
</ul> 
</li> 
<li class="ui-state-disabled"><a href="#">Amesville</a></li> 
</ul> 


</body> 
</html> 
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图 标 
一 个 带 有 默认 配置 的 菜单 ， 显 示 如 何 使 用 带 有 图 标的 菜单。 


<!doctype html> 
<html lang="en"> 


<head> 


<meta charset="utf-8"> 
<title>jQuery UI 菜单 (Menu) - </title> 

<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script srcz"//code.jquery.com/ui/1.10.4/jquery-ui.js"»«/script» 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<script> 


$(function() { 
$( "#menu" ).menu(); 


}); 
</script> 
<style> 


.ui-menu { width: 150px; } 


</style> 
</head> 
<body> 


<ul id="menu"> 
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>{Rt¥</a 
<li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>MX< 
<li><a href="#"><span class="ui-icon ui-icon-zoomout"»«/span-»Zg/lV 
«li class="ui-state-disabled"><a href="#"><span class="ui-icon u: 


<li> 


«a href="#"> 播 放 </a> 


<ul> 
<li><a 
<li><a 
<li><a 
<li><a 
</ul> 
</li> 
</ul> 


</body> 
</html> 


a 


href="#"><span 
href="#"><span 
href="#"><span 
href="#"><span 


class="ui-icon 
class="ui-icon 
class="ui-icon 
class="ui-icon 


ui-icon-seek-start'»«/s[ 
ui-icon-stop"»«/span»ífgi 
ui-icon-play"»«/span»iÉ5 
ui-icon-seek-end"></spar 





jQuery Ul 实例 - 进度 条 (Progressbar) 


显示 一 个 确定 的 或 不 确定 的 进程 状态 。 


如 需 了 解 更 多 有 关 progressbar 部 件 的 细节 ， 请 查看 API 文档 进度 条 部 件 
(Progressbar Widget) 。 


默认 功能 
默认 的 确定 的 进度 条 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 进度 条 (Progressbar) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#progressbar" ).progressbar({ 
value: 37 


</script> 
</head> 
<body> 


<div id="progressbar"></div> 


</body> 
</html> 





自 定义 标签 
自 定 义 更 新 的 标签 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 进度 条 (Progressbar) - 自 定义 标签 </title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.ui-progressbar { 
position: relative; 
} 
.progress-label { 
position: absolute; 
left: 50%; 
top: 4px; 
font-weight: bold; 
text-shadow: 1px 1px © #fff; 
} 
</style> 
<script> 
$(function() { 
var progressbar 
progressLabel 


= $( "#progressbar" ), 
= $( ".progress-label" ); 
progressbar.progressbar(( 
value: false, 
change: function() ( 
progressLabel.text( progressbar.progressbar( "value" ) + "9 
ty 
complete: function() { 
progressLabel.text( "Sem!" ); 
} 
}); 


function progress() { 
var val = progressbar.progressbar( "value" ) || 0; 


progressbar.progressbar( "value", val + 1 ); 


if ( val < 99 ) { 
setTimeout( progress, 100 ); 
} 
} 


setTimeout( progress, 3000 ); 
1); 
</script> 
</head> 
<body> 


«div id="progressbar"><div class-"progress-label"»7Ó...«/div»«/di 


«/body» 
«/html» 








不 确定 的 值 


不 确定 的 进度 条 ， 并 可 在 确定 和 不 确定 的 样式 之 间 切 换 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 进度 条 (Progressbar) - 不 确定 的 值 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#progressbar" ).progressbar({ 
value: false 
3); 
$( "button" ).on( "click", function( event ) ( 
var target - $( event.target ), 
progressbar = $( "#progressbar" ), 
progressbarValue = progressbar.find( ".ui-progressbar -value 


if ( target.is( "#numButton" ) ) ( 
progressbar.progressbar( "option", ( 
value: Math.floor( Math.random() * 100 ) 
H); 
} else if ( target.is( "#colorButton" ) ) { 
progressbarValue.css({ 
"background": '#' + Math.floor( Math.random() * 16777215 
3); 
) else if ( target.is( "#falseButton" ) ) { 
progressbar.progressbar( "option", "value", false ); 
} 
H); 
1); 
«/script» 
<style> 
#progressbar .ui-progressbar-value { 
background-color: #ccc; 
} 
</style> 
</head> 
<body> 


<div id="progressbar"></div> 

<button id="numButton"> 随 机 值 - 确定 </button> 
«button id="falseButton"> 不 确定 </button> 
«button id="colorButton"> 随 机 颜色 </button> 


</body> 
</html> 
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jQuery UI 实例 - 滑 块 (Slider) 


拖 动 手柄 来 选择 一 个 数值 。 


如 需 了 解 更 多 有 关 slider 部 件 的 细节 ， 请 查看 API 文档 滑 块 部 件 Slider 
Widget) 。 


默认 功能 
基本 的 滑 块 是 水 平 的 ， 有 一 个 单一 的 手柄 ， 可 以 用 鼠标 或 箭头 键 进行 移动 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider" ).slider(); 
3); 
</script> 
</head> 
<body> 


«div id="slider"></div> 


</body> 
</html> 
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颜色 选择 器 


组 合 了 三 个 滑 块 ， 来 创建 一 个 简单 的 RGB 颜色 选择 器 。 





<!doctype html> 
<html lang="en"> 
<head> 
«meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 颜色 选择 器 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 


«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#red, #green, #blue { 
float: left; 
clear: left; 
width: 300px; 
margin: 15px; 
} 
#swatch { 
width: 120px; 
height: 100px; 
margin-top: 18px; 
margin-left: 350px; 
background-image: none; 
} 
#red .ui-slider-range { background: #ef2929; } 
#red .ui-slider-handle { border-color: #ef2929; } 
#green .ui-slider-range { background: #8ae234; } 
#green .ui-slider-handle { border-color: #8ae234; } 
#blue .ui-slider-range { background: #729fcf; } 
#blue .ui-slider-handle { border-color: #729fcf; } 
</style> 
<script> 
function hexFromRGB(r, g, b) { 
var hex = [ 
r.toString( 16 ), 
g.toString( 16 ), 
b.toString( 16 ) 
]; 


$.each( hex, function( nr, val ) { 


if ( val.length === 1 ) { 
hex[ nr ] = "0" + val; 
} 
3); 
return hex.join( "" ).toUpperCase( ); 


j 


function refreshSwatch() (1 
var red = $( "#red" ).slider( "value" ), 
green = $( "#green" ).slider( "value" ), 
blue = $( "#blue" ).slider( "value" ), 
hex = hexFromRGB( red, green, blue ); 
$( "#swatch" ).css( "background-color", "#" + hex ); 


} 
$(function() { 
$( "#red, #green, #blue" ).slider({ 

orientation: "horizontal", 
range: "min", 
max: 255, 
value: 127, 
slide: refreshSwatch, 
change: refreshSwatch 


}); 


$( "#red" ).slider( "value", 255 ); 
$( "#green" ).slider( "value", 140 ); 
$( "#blue" ).slider( "value", 60 ); 
1); 
</script> 
</head> 
«body class="ui-widget-content" style="border:0;"> 


<p class="ui-state-default ui-corner-all ui-helper-clearfix" style: 
<span class="ui-icon ui-icon-pencil" style="float:left; margin: -: 
简单 的 颜色 选择 器 

</p> 


<div id="red"></div> 
<div id="green"></div> 
<div id="blue"></div> 


<div id="swatch" class="ui-widget-content ui-corner-all"></div> 


</body> 
</html> 
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多 个 滑 自 块 


组 合 水 平 的 和 垂直 的 滑 块 ， 每 个 都 带 有 各 自 的 选项 ， 来 创建 一 个 音乐 播放 器 的 UI, 


<!doctype html> 
<html lang="en"> 


<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 多 个 滑 块 </title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#eq span { 
height:120px; float:left; margin:15px 
} 
</style> 
<script> 
$(function() { 
// 设置 主音 量 
$( "#master" ).slider({ 
value: 60, 
orientation: "horizontal", 
range: "min", 
animate: true 


3): 


// 设置 图 形 均 衡器 
$( "#eq > span" ).each(function() { 
// 从 标记 读 取 初 始 值 并 删除 
var value = parseInt( $( this ).text(), 10 ); 
$( this ).empty().slider({ 
value: value, 
range: "min", 
animate: true, 
orientation: "vertical" 


3); 

</script> 
</head> 
<body> 


<p class="ui-state-default ui-corner-all ui-helper-clearfix" style: 
<span class="ui-icon ui-icon-volume-on" style="float:left; margir 
主音 量 


</p> 
«div id="master" style="width:260px; margin:15px;"></div> 


«p class="ui-state-default ui-corner-all" style="padding: 4px;margitr 
<span class="ui-icon ui-icon-signal" style="float:left; margin: -: 
形 均 衡器 

</p> 


<div id="eq"> 
<span>88</span> 
<span>77</span> 
<span>55</span> 
<span>33</span> 
<span>40</span> 
<span>45</span> 
<span>70</span> 

</div> 


</body> 
</html> 
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设置 range 选项 为 true， 来 获取 带 有 两 个 拖 搜 手 柄 的 值 的 范围 。 手 柄 之 间 的 控件 
用 不 同 的 背景 颜色 填充 来 表示 该 区 间 的 值 是 可 选择 的 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 范围 滑 块 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "£slider-range" ).slider({ 
range: true, 
min: O0, 
max: 500, 
values: [ 75, 300 ], 
slide: function( event, ui ) { 
$( "#amount" ).val( "$" + ui.values[ © ] +" - $" + ui.vali 
} 
}); 


$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values' 
" - $" + $( "#slider-range" ).slider( "values", 1 ) ); 
3); 
«/script» 
</head> 
<body> 


<p> 
«label for="amount"> 价 格 范围 : </label> 
<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 


«div id="slider -range"></div> 


</body> 
</html> 
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带 有 固定 最 大 值 的 范围 


固定 范围 滑 块 的 最 大 值 ， 用 户 只 能 选择 最 小 值 。 设 置 range 选项 为 "max"。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 带 有 固定 最 大 值 的 范围 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider-range-max" ).slider({ 
range: "max", 


min: 1, 
max: 10, 
value: 2, 


slide: function( event, ui ) { 
$( "#amount" ).val( ui.value ); 
} 
3); 
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) 
3); 
«/script» 
«/head» 
«body» 


«p» 
«label for="amount"> 最 小 的 房间 数量 : </label> 
<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 
«div id="slider -range-max"></div> 


</body> 
</html> 
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带 有 固定 最 小 值 的 范围 


固定 范围 滑 块 的 最 小 值 ， 用 户 只 能 选择 最 大 值 。 设 置 range 选项 为 "min"。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
«title»jQuery UI 滑 块 (Slider) - 带 有 固定 最 小 值 的 范围 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider-range-min" ).slider({ 
range: "min", 


value: 37, 
min: 1, 
max: 700, 


slide: function( event, ui ) { 
$( "#amount" ).val( "$" + ui.value ); 
} 
3); 
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "va: 
3); 
«/script» 
«/head» 
«body» 


«p» 
«label for="amount"> 最 大 价格 : </label> 


<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 


«div id="slider -range-min"></div> 


</body> 
</html> 
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or FE Sl] select 的 滑 块 


如 何 绑 定 一 个 滑 块 到 一 个 已 有 的 select 元 素 。 选 择 保持 可 见 以 便 显 示 变 化 。 当 选择 
改变 时 ， 同 时 更 新 滑 块 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 743k (Slider) - 绑 定 到 select 的 滑 块 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var select = $( "#minbeds" ); 
var slider = $( "<div id='slider'></div>" ).insertAfter( select 
min: 1, 
max: 6, 
range: "min", 
value: select[ © ].selectedIndex + 1, 
slide: function( event, ui ) ( 
select[ 0 ].selectedIndex = ui.value - 1; 
} 
}); 
$( "#minbeds" ).change(function() { 
slider.slider( "value", this.selectedIndex + 1 ); 
3): 
3); 
«/script» 
</head> 
<body> 


<form id="reservation"> 
«label for="minbeds"> 最 小 的 床位 数 </label> 
<select name="minbeds" id="minbeds"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
</select> 
</form> 


</body> 
</html> 
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滑 块 滚动 条 


使 用 滑 块 来 操作 页 面 上 内 容 的 定位 。 本 实例 中 ， 它 是 一 个 能 获取 值 的 滚动 条 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 383% (Slider) - 滑 块 滚动 条 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.scroll-pane { overflow: auto; width: 99%; float:left; } 
.scroll-content { width: 2440px; float: left; } 
.scroll-content-item { width: 100px; height: 100px; float: left; 
.scroll-bar-wrap { clear: left; padding: © 4px © 2px; margin: © . 
.scroll-bar-wrap .ui-slider { background: none; border:0; height 
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; v 
.Scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } 
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto ( 
</style> 
<script> 
$(function() { 

// 滚 动 面板 部 分 
var scrollPane = $( ".scroll-pane" ), 
scrollContent = $( ".scroll-content" ); 


// 创 建 滑 块 
var scrollbar = $( ".scroll-bar" ).slider({ 
slide: function( event, ui ) { 
if ( scrollContent.width() > scrollPane.width() ) { 
scrollContent.css( "margin-left", Math. round( 
ui.value / 100 * ( scrollPane.width() - scrollContent.v 
) + "px" je 
) else { 
scrollContent.css( "margin-left", © ); 
} 
} 
}); 


// 追 加 要 处 理 的 图 标 
var handleHelper = scrollbar.find( ".ui-slider-handle" ) 
.mousedown(function() { 
scrollbar.width( handleHelper.width() ); 
}) 
.mouseup(function() { 
scrollbar.width( "100%" ); 
}) 
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'><, 
.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(: 


// 由 于 滑 块 手柄 滚动 ， 改 变 要 隐藏 的 浴 出 部 分 
scrollPane.css( "overflow", "hidden" ); 


// 根 据 要 滚动 距离 按 比 例 定 义 滚动 条 和 手柄 的 尺寸 
function sizeScrollbar() { 
var remainder = scrollContent.width() - scrollPane.width(); 
var proportion remainder / scrollContent.width(); 
var handleSize scrollPane.width() - ( proportion * scrollP: 
scrollbar.find( ".ui-slider-handle" ).css({ 
width: handleSize, 
"margin-left": -handleSize / 2 


3); 
handleHelper.width( "" ).width( scrollbar.width() - handleSi: 


} 


// 基 于 滚动 内 容 位 置 ， 重 置 滑 块 的 值 
function resetValue() { 
var remainder = scrollPane.width() - scrollContent.width(); 
var leftVal = scrollContent.css( "margin-left" ) === "auto" * 
parseInt( scrollContent.css( "margin-left" ) ); 
var percentage = Math.round( leftVal / remainder * 100 ); 
scrollbar.slider( "value", percentage ); 


j 


// 如 果 滑 块 是 100965, BRORA, METRAR 
function reflowContent() { 
var showing = scrollContent.width() + parseInt( scrollConte 
var gap = scrollPane.width() - showing; 
if ( gap > 0 ){ 
scrollContent.css( "margin-left", parseInt( scrollContent 
j 
} 


// 当 缩放 窗口 时 改变 手柄 的 位 置 
$( window ).resize(function() { 
resetValue(); 
sizeScrollbar(); 
reflowContent(); 
3); 
// 初 始 化 滚动 条 大 小 
setTimeout( sizeScrollbar, 10 );//safari 超时 
3); 
«/script» 
«/head» 
«body» 


«div class-"scroll-pane ui-widget ui-widget-header ui-corner-all"> 
«div class="scroll-content"> 
«div class="scroll-content-item ui-widget -header">1</div> 
«div class="scroll-content-item ui-widget -header">2</div> 
<div class="scroll-content-item ui-widget -header">3</div> 
«div class="scroll-content-item ui-widget -header">4</div> 
«div class="scroll-content-item ui-widget -header">5</div> 
«div class="scroll-content-item ui-widget -header">6</div> 
«div class="scroll-content-item ui-widget -header">7</div> 
<div class="scroll-content-item ui-widget -header">8</div> 


<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
</div> 


<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> 


<div 
</div> 
</div> 


</body> 
</html> 
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对 


通过 把 step 选项 设置 为 一 个 整数 来 设置 滑 块 值 的 增 量 ， 


class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 
class="scroll-content-item 


class="scroll-bar"></div> 


H 
齐 增 量 


数 。 默 认 增 量 是 1。 


ui-widget -header">9</div> 
ui-widget -header">10</div> 
ui-widget -header">11</div> 
ui-widget -header">12</div> 
ui-widget -header">13</div> 
ui-widget -header">14</div> 
ui-widget -header">15</div> 
ui-widget -header">16</div> 
ui-widget -header">17</div> 
ui-widget -header">18</div> 
ui-widget -header">19</div> 
ui-widget -header">20</div> 





通常 是 滑 块 最 大 值 的 除 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 对 齐 增 量 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider" ).slider({ 
value:100, 
min: 0, 
max: 500, 
step: 50, 
slide: function( event, ui ) { 
$( "#amount" ).val( "$" + ui.value ); 
} 
}); 
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) ); 
}); 
</script> 
</head> 
<body> 


<p> 

«label for="amount"> 捐 款 金额 ($50 Æ) :</label> 

<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 


«div id="slider"></div> 


</body> 
</html> 


Lm. 





Æ BASE E] tk 


改变 范围 滑 块 的 方向 为 垂直 的 。 通 过 .height() 分 配 一 个 高 度 值 ， 或 通过 CSS 
设置 高 度 ， 同 时 设置 orientation 选项 为 "vertical"。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 垂直 的 范围 滑 块 </tit1Le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "£slider-range" ).slider({ 
orientation: "vertical", 
range: true, 
values: [ 17, 67 ], 
slide: function( event, ui ) ( 
$( "#amount" ).val( "$" + ui.values[ © ] +" - $" + ui.vali 
} 
}); 


$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values' 
" - $" + $( "#slider-range" ).slider( "values", 1 ) ); 


3); 

«/script» 
</head> 
<body> 


<p> 
«label for="amount"> 销 售 目标 (BA) : </label> 
<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 
«div id="slider-range" style="height :250px; "></div> 


</body> 
</html> 


SS eS 


垂直 的 滑 块 


改变 滑 块 的 方向 为 垂直 的 。 通 过 .height() 分 配 一 个 高 度 值 ， 或 通过 CSS 设置 
高 度 ， 同 时 设置 orientation 选项 为 "vertical"。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 滑 块 (Slider) - 垂直 的 滑 块 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#slider-vertical" ).slider({ 
orientation: "vertical", 
range: "min", 


min: 0, 
max: 100, 
value: 60, 


slide: function( event, ui ) ( 
$( "#amount" ).val( ui.value ); 
} 
}); 
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) 
}); 
</script> 
</head> 
<body> 


<p> 
«label for="amount">(&42 : </label> 


<input type="text" id="amount" style="border:0; color:#f6931f; f« 
</p> 


«div id="slider-vertical" style="height :200px;"></div> 


</body> 
</html> 


SSS ae 





jQuery UI 实例 - 旋转 器 (Spinner) 


通过 向 上 /向 下 按钮 和 箭头 键 人 处 理 ， 为 输入 数值 增强 文本 输入 功能 。 


KR TEES spinner 部 件 的 细节 ， 请 查看 API 文档 旋转 器 部 件 (Spinner 
Widget) 。 


默认 功能 
默认 的 旋转 器 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script srcz"//code.jquery.com/jquery-1.9.1.js"»«/script» 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

var spinner = $( "#spinner" ).spinner(); 


$( "#disable" ).click(function() { 
if ( spinner.spinner( "option", "disabled" ) ) { 
spinner.spinner( "enable" ); 
) else ( 
spinner.spinner( "disable" ); 
} 


3); 
$( "#destroy" ).click(function() { 
if ( spinner.data( "ui-spinner" ) ) { 
spinner.spinner( "destroy" ); 
) else ( 
spinner.spinner(); 
} 


3); 
$( "#getvalue" ).click(function() { 
alert( spinner.spinner( "value" ) ); 


3); 
$( "#setvalue" ).click(function() { 
spinner.spinner( "value", 5 ); 


3); 


$( "button" ).button(); 
}); 


</script> 
</head> 
<body> 


<p> 
«label for="spinner'"> 选 择 一 个 值 : </label> 
<input id="Spinner" name="value"> 

</p> 


<p> 
«button id="disable"> 切 换 禁 用 /启用 </button> 
<button id="destroy"> 切 换 部 件 </button> 
</p> 


<p> 
<button id="getvalue"> 获 取 值 </button> 
«button id="setvalue"> 设 置 值 为 5</button> 
</p> 


</body> 
</html> 





贷 


~ 


本 实例 是 一 个 捐款 表格 ， 带 有 货币 选择 和 数量 旋转 器 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - 货币 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#currency" ).change(function() { 
$( "#spinner" ).spinner( "option", "culture", $( this ).val(: 


3): 


$( "#spinner" ).spinner({ 
min: 5, 
max: 2500, 
step: 25, 
start: 1000, 
numberFormat: "C" 
3): 
3); 
«/script» 
«/head» 
«body» 


«p» 
«label for="currency"> 要 捐款 的 货币 </1abel> 
«select id="currency" name="Currency"> 

<option value="en-US">US $</option> 

<option value="de-DE">EUR €</option> 

«option value="ja-JP">YEN ¥*</option> 
</select> 

</p> 

<p> 
«label for="spinner"> 要 捐款 的 数量 : </label> 
<input id="spinner" name="Spinner" value="5"> 

</p> 


</body> 
</html> 





小 数 


本 实例 是 一 个 小 数 旋转 器 。 增 量 设置 为 0.01。 处 理 文化 变化 的 代码 会 读 取 当前 的 选 
择 器 的 值 ， 当 改变 文化 时 ， 会 基于 新 的 文化 重新 设置 值 的 样式 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - 小 数 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#spinner" ).spinner({ 


step: 0.01, 
numberFormat: "n" 
}); 


$( "#culture" ).change(function() { 
var current = $( "#spinner" ).spinner( "value" ); 
Globalize.culture( $(this).val() ); 
$( "#spinner" ).spinner( "value", current ); 
}); 
}); 
</script> 
</head> 
<body> 


<p> 
«label for="spinner"> 小 数 旋转 器 : «/label» 
<input id="Spinner" name="Spinner" value="5.06"> 
</p> 
<p> 
«label for="culture"> 选 择 一 种 用 于 格式 化 的 文化 : </label> 
<select id="culture"> 
«option value="en-EN" selected="selected">English</option> 
<option value="de-DE">German</option> 
<option value="ja-JP">Japanese</option> 
</select> 
</p> 


</body> 
</html> 








地 
谷歌 地 图 集成 ， 使 用 旋转 器 来 改变 纬度 和 经 度 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - 地 图 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="http://maps.google.com/maps/api/js?sensor=false"></: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
function latlong() { 
return new google.maps.LatLng( $("#lat").val(), $("4Zlng").va- 
} 
function position() { 
map.setCenter( latlong() ); 


} 

$( "#lat, #lng" ).spinner({ 
step: .001, 
change: position, 
stop: position 


3): 


var map = new google.maps.Map( $("Zmap")[0], { 
zoom: 8, 
center: latlong(), 
mapTypeId: google.maps.MapTypeld.ROADMAP 
3); 
1); 
«/script» 
<style> 
#map { 
width:500px; 
height :500px; 


</style> 
</head> 
<body> 


«label for="lat">#+F</label> 

<input id="lat" name="lat" value="44.797"> 
<br> 

«label for="1ng">4E</label> 

<input id-"lng" name="1ng" value="-93.278"> 


<div id="map"></div> 


</body> 
</html> 


«| == 
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<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - j@Hi</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#spinner" ).spinner({ 
spin: function( event, ui ) { 
if ( ui.value > 10 ) ( 
$( this ).spinner( "value", -10 ); 
return false; 
} else if ( ui.value « -10 ) ( 
$( this ).spinner( "value", 10 ); 
return false; 
J 
} 
}); 
}); 
</script> 
</head> 
<body> 


<p> 
«label for="spinner">it4#—‘ : </label> 
<input id="spinner" name="value"> 

</p> 


</body> 
</html> 
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时 间 


一 个 扩展 自 旋 转 器 的 自 定 义 部 件 。 使 用 全 球 化 (Globalization) 插件 来 解析 和 输出 
at ja), "P BXESBJstep 和 page 选项 。 向 上 /向 下 光标 用 于 分 钟 的 递增 /递减 ， 
向 上 /向 下 翻 页 用 于 小 时 的 递增 /递减 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 旋转 器 (Spinner) - </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="http://jqueryui.com/resources/demos/external/jquery 
<script src="http://jqueryui.com/resources/demos/external/global: 
<script src="http://jqueryui.com/resources/demos/external/global: 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$.widget( "ui.timespinner", $.ui.spinner, { 
options: { 
// 秒 
step: 60 * 1000, 
// 小 时 
page: 60 


, 


parse: function( value ) { 


if ( typeof value === "string" ) { 
// Bi—^ HR we 
if ( Number( value ) == value ) { 


return Number( value ); 
return +Globalize.parseDate( value ); 


return value; 


ty 


_format: function( value ) { 
return Globalize.format( new Date(value), "t" ); 


} 
3): 


$(function() { 
$( "#spinner" ).timespinner(); 


$( "#culture" ).change(function() { 
var current = $( "#spinner" ).timespinner( "value" ); 
Globalize.culture( $(this).val() ); 
$( "#spinner" ).timespinner( "value", current ); 


3): 
}); 


</script> 
</head> 


<body> 


<p> 
«label for="spinner"> 时 间 旋 转 器 : </label> 
<input id="Spinner" name="Spinner" value="08:30 PM"> 
</p> 
<p> 
<label for="culture"> 选 择 一 种 用 于 格式 化 的 文化 : </label> 
<select id="culture"> 
«option value="en-EN" selected="Selected">English</option> 
<option value="de-DE">German</option> 
</select> 
</p> 


</body> 
</html> 





jQuery Ul 实例 - 标签 页 (Tabs) 
一 种 多 面板 的 单 内容 区 ， 每 个 面板 与 列表 中 的 标题 相关 。 


ur cene tabs 部 件 的 细节 ， 请 查看 API 文档 标签 页 部 件 (Tabs 
Widget) . 


默认 功能 


点 击 标签 页 ， 切 换 被 划分 为 不 同 逻 辑 部 分 的 内 容 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#tabs" ).tabs(); 
3); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1i> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
«div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 


J # 
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点 击 选 中 的 标签 页 来 切换 内 容 的 关闭 /打开 状态 。 为 了 启用 这 个 功能 ， 需 要 设置 
collapsible 选项 为 true。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 折 且 内容 </tit1e> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#tabs" ).tabs({ 
collapsible: true 
3): 
3); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1i> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
«div id="tabs-1"> 
<p><strong> 再 次 点 击 标签 页 来 关闭 内 容 面板 。</strong></p> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p><strong> 再 次 点 击 标签 页 来 关闭 内 容 面板 。</strong></p> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p><strong> 再 次 点 击 标签 页 来 关闭 内 容 面板 。</strong></p> 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 
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通过 Ajax 获取 内 容 


在 标签 页 链接 中 设置 href 的 值 来 为 标签 页 通过 Ajax 获取 外 部 的 内 容 。 当 Ajax 请 求 
在 等 待 响应 时 ， 标 签 页 的 标签 变 为 "Loading..."， 当 加 载 完 成 后 返回 常规 的 标签 。 


标签 3 和 4 演示 了 慢 加 载 和 损坏 的 AJAX 标签 ， 以 及 如 何 义理 这 些 情况 下 的 服务 器 
ERN 


端的 错误 。 请 注意 


意 ， 这 两 个 都 要 求 web 服务 器 能 解释 PHP。 它 们 在 文件 系统 以 外 
无 法 工作 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 通过 Ajax 获取 内 容 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#tabs" ).tabs({ 
beforeLoad: function( event, ui ) { 
ui.jqXHR.error(function() { 
ui.panel.html( 
"不 能 加 载 该 标签 页 。 如 果 这 不 是 一 个 演示 。" + 
"我 们 会 尽快 修复 这 个 问题 。" ); 
3); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1"> 预 加 载 </a></1i> 
<li><a href="ajax/content1i.html"> 标 签 1</a></1i> 
<li><a href="ajax/content2.html"> 标 签 2</a></1i> 
<li><a href="ajax/content3-slow.php"> 标 签 3 ”( 慢 的 ) «/a»«/li» 
<li><a href="ajax/content4-broken.php"> 标 签 4 (损坏 的 ) «/a»«/li» 
</ul> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
</div> 


</body> 
</html> 
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通过 event 选项 设置 当 鼠 标 基 停 时 切换 各 部 分 的 打开 /关闭 状态 。event 的 默认 值 
是 "Click", 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - Ag 4} </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( "#tabs" ).tabs({ 
event: "mouseover" 
3); 
3); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1i> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 


do RE 


简单 的 操作 


简单 的 标签 页 添加 和 移 除 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


<title>jQuery UI 标签 页 (Tabs) - 简单 的 操作 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#dialog label, #dialog input { display:block; } 
#dialog label { margin-top: 0.5em; } 
#dialog input, #dialog textarea { width: 95%; } 
#tabs { margin-top: 1em; } 
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; « 
4add tab { cursor: pointer; } 
</style> 
<script> 
$(function() { 
var tabTitle = $( "#tab_title" ), 
tabContent $( "#tab_content" ), 
tabTemplate = "<li><a href='#{href}'>#{label}</a> «span clas: 
tabCounter - 2; 


var tabs = $( "#tabs" ).tabs(); 


// 模 态 对 话 框 的 初始 化 : 自 定义 按钮 和 一 个 重 置 内 部 表单 的 "close" 回调 
var dialog = $( "#dialog" ).dialog({ 
autoOpen: false, 
modal: true, 
buttons: { 
Add: function() { 
addTab(); 
$( this ).dialog( "close" ); 
tr 
Cancel: function() { 
$( this ).dialog( "close" ); 
J 
ty 


close: function() { 
form[ © ].reset(); 
Jj 
H); 


// addTab 表单 : 当 提交 时 调用 addTab 画 数 ， 并 关闭 对 话 框 

var form = dialog.find( "form" ).submit(function( event ) { 
addTab(); 
dialog.dialog( "close" ); 
event .preventDefault(); 


3): 


// 实际 的 addTab BHR : 使 用 上 面 表 单 的 输入 添加 新 的 标签 页 
function addTab() { 
var label = tabTitle.val() || "Tab " + tabCounter, 
id = "tabs-" + tabCounter, 
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replé 
tabContentHtml = tabContent.val() || "Tab " + tabCounter + 


tabs.find( ".ui-tabs-nav" ).append( li ); 

tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "< 
tabs.tabs( "refresh" ); 

tabCounter++; 


// addTab 按钮 : 值 打开 对 话 框 
$( "#add_tab" ) 
.button() 
.click(function() ( 
dialog.dialog( "open" ); 
3); 


// 关闭 图 标 : 当 点 击 时 移 除 标签 页 

tabs.delegate( "span.ui-icon-close", "click", function() { 
var panellId = $( this ).closest( "li" ).remove().attr( "aria 
$( "#" + panelld ).remove(); 
tabs.tabs( "refresh" ); 


3); 


tabs.bind( "keyup", function( event ) ( 
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE 
var panelld = tabs.find( ".ui-tabs-active" ).remove().attri 
$( "£4" + panellId ).remove( ); 
tabs.tabs( "refresh" ); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div id="dialog" title="Tab data"> 
<form> 
<fieldset class="ui-helper-reset"> 
«label for="tab_title"> 标 题 </label> 
<input type="text" name="tab_title" id="tab_title" value="" ( 
«label for="tab_content">A¥8</label> 
«textarea name="tab_content" id="tab_content" class="ui-widge 
</fieldset> 
</form> 
</div> 


«button id-"add tab"> 添 加 标签 页 </button> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a> <span class-"ui-icon ti 
</ul> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 


</div> 


</body> 
</html> 


a] ie 


排序 (Sortable) 


拖 搜 上 面 的 标签 页 来 对 它们 进行 重新 排序 。 
只 需要 简单 地 调用 .ui-tabs-nav 元 素 上 的 .sortable() ， 即 可 让 标签 页 可 排 
序 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - HER (Sortable) </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
var tabs = $( "#tabs" ).tabs(); 
tabs.find( ".ui-tabs-nav" ).sortable({ 
axis. XK 
stop: function() { 
tabs.tabs( "refresh" ); 
} 
}); 
}); 
</script> 
</head> 
<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></li> 
<li><a href="#tabs-2">Proin dolor</a></li> 
<li><a href="#tabs-3">Aenean lacinia</a></li> 
</ul> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pol 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 


Is] n 





底部 标签 页 


通过 一 些 额 外 的 CSS (用 于 定位 的 ) 和 JS 〈 在 元 素 上 放置 正确 的 class) ， 标 签 页 
上 皆 可 放置 在 内 容 的 底部 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 底部 标签 页 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#tabs" ).tabs(); 


// 修改 class 

$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" ` 
.removeClass( "ui-corner-all ui-corner-top" ) 
.addClass( "ui-corner-bottom" ); 


// 移动 导航 到 底部 
$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" ); 
3); 
</script> 
<style> 
/* 强制 一 个 高 度 ， 这 样 标签 页 就 不 会 随 着 内 容 高 度 的 改变 而 改变 */ 
#tabs .tabs-spacer { float: left; height: 200px; } 
.tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2« 
.tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: © .: 
.tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; | 
</style> 
</head> 
<body> 


<div id="tabs" class="tabs-bottom"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1li> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
<div class="tabs-spacer"></div> 
<div id="tabs-1"> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 





垂下 的 标签 页 


点 击 标签 页 ， 切 换 被 划分 为 不 同 逻 辑 部 分 的 内 容 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 标签 页 (Tabs) - 垂直 的 标签 页 </tit1le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 

$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clea! 
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-c« 

1); 
</script> 
<style> 
.Ui-tabs-vertical { width: 55em; } 
.Ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; f: 
.Ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; boi 
.Ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
.Ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottor 
.Ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; w: 
</style> 

</head> 

<body> 


<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Nunc tincidunt</a></1li> 
<li><a href="#tabs-2">Proin dolor</a></1li> 
<li><a href="#tabs-3">Aenean lacinia</a></1li> 
</ul> 
<div id="tabs-1"> 
<h2> 内 容 标题 1</h2> 
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, 
</div> 
<div id="tabs-2"> 
<h2> 内 容 标题 2«/h2» 
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
</div> 
<div id="tabs-3"> 
<h2> 内 容 标题 3</h2> 
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse pot 
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, 
</div> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 工具 提示 框 (Tooltip) 


可 自 定义 的 、 可 主题 化 的 工具 提示 框 ， 蔡 代 原 生 的 工具 提示 框 。 


如 需 了 解 更 多 有 关 tooltip 部 件 的 细节 ， 请 查看 API 文档 工具 提示 框 部 件 (Tooltip 
Widget) 。 


默认 功能 
县 停 在 链接 上 ， 或 者 使 用 tab 键 循环 切换 聚焦 在 每 个 元 素 上 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( document ).tooltip(); 
3); 
«/script» 
<style> 
label { 
display: inline-block; 
width: 5em; 


</style> 
</head> 
<body> 


<p><a href="#" title=" 部 件 的 名 称 ">Tooltips</a> 可 被 绑 定 到 任意 的 元 素 上 。¥ 
<p> 但 是 由 于 它 不 是 一 个 原生 的 工具 提示 框 ， 所 以 它 可 以 被 定义 样式 。 通 过 <a href="ht 
<p> 工 具 提 示 框 也 可 以 用 于 表单 元 素 ， 来 显示 每 个 区 域 中 的 一 些 人 额外 的 信息 。</p> 
<p><label for="age"> 您 的 年 龄 : </label><input id="age" title=" 年 龄 仅 用 : 
<p> 悬 停 在 相应 的 区 域 上 查看 工具 提示 框 。</p> 


</body> 
</html> 


SS 





自 定 义 样 式 


莽 停 在 链接 上 ， 或 者 使 用 tab 键 循环 切换 聚焦 在 每 个 元 素 上 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 自 定义 样式 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<script> 
$(function() { 
$( document ).tooltip({ 
position: { 
my: "center bottom-20", 
at: "center top", 
using: function( position, feedback ) { 
$( this ).css( position ); 
$( Nediv>" ) 
.addClass( "arrow" ) 
.addClass( feedback.vertical ) 
.addClass( feedback.horizontal ) 
.appendTo( this ); 
} 
} 
3); 
1); 
«/script» 
«style» 
.ui-tooltip, .arrow:after { 
background: black; 
border: 2px solid white; 
} 
.ui-tooltip { 
padding: 10px 20px; 
color: white; 
border-radius: 20px; 
font: bold 14px "Helvetica Neue", Sans-Serif; 
text-transform: uppercase; 
box-shadow: © 0 7px black; 
} 
arrow { 
width: 70px; 
height: 16px; 
overflow: hidden; 
position: absolute; 
left: 50%; 
margin-left: -35px; 
bottom: -16px; 
} 


.arrow.top { 


top: -16px; 
bottom: auto; 


.arrow.left { 
left: 20%; 

} 

.arrow:after { 
content: ""; 
position: absolute; 
left: 20px; 
top: -20px; 
width: 25px; 
height: 25px; 
box-shadow: 6px 5px 9px -9px black; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
tranform: rotate(45deg); 

J 

.arrow.top:after ( 
bottom: -20px; 


top: auto; 
} 
</style> 
</head> 
<body> 


<p><a href="#" title=" 部 件 的 名 称 ">Tooltips</a> 可 被 绑 定 到 任意 的 元 素 上 。¥ 
<p> 但 是 由 于 它 不 是 一 个 原生 的 工具 提示 框 ， 所 以 它 可 以 被 定义 样式 。 通 过 <a href="ht 
<p> 工 具 提 示 框 也 可 以 用 于 表单 元 素 ， 来 显示 每 个 区 域 中 的 一 些 额 外 的 信息 。</p> 
<p><label for="age"> 您 的 年 龄 : </label><input id="age" title=" 年 龄 仅 用 : 
<p> 悬 停 在 相应 的 区 域 上 查看 工具 提示 框 。</p> 


</body> 
</html> 


a] a: 





自 定 义 动 男 


本 实例 演示 了 如 何 使 用 show 和 hide 选项 来 自 定义 动画 ， 也 可 以 使 用 open 事件 来 
自 定义 动画 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


自 定义 动画 </title> 


<title>jQuery UI 工具 提示 框 (Tooltip) 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 

<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<script> 
$(function() { 
$( "#show-option" ).tooltip({ 


show: { 
effect: "slideDown", 
delay: 250 
} 
H; 
$( "#hide-option" ).tooltip({ 
hide: { 
effect: "explode", 
delay: 250 
} 
3); 


$( "#open-event" ).tooltip({ 
show: null, 
position: { 
my: "left top", 
at: "left bottom" 
3 


open: function( event, ui ) ( 
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, 


} 
}); 
}); 
</script> 
</head> 
<body> 


<p> 这 里 有 多 种 方式 自 定义 工具 提示 框 的 动画 。</p> 

<p> 您 可 以 使 用 «a id="show-option" href="http://jqueryui.com/demos/to 
«a id="hide-option" href="http://jqueryui.com/demos/tooltip/#optior 
<p> 您 也 可 以 使 用 «a id-"open-event" href="http://jqueryui.com/demos/t«¢ 


</body> 
</html> 


自 定 义 内 容 





演示 如 何 通过 自 定义 items 和 content 选项 ， 来 组 合 不 同 的 事件 委托 工具 提示 框 到 
一 个 单一 的 实例 中 。 


您 可 能 需要 与 地 图 工具 提示 框 进行 交互 ， 这 是 未 来 版 本 中 的 一 个 待 实现 的 功能 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 自 定义 内 容 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.photo { 
width: 300px; 
text-align: center; 
} 
.photo .ui-widget-header { 
margin: 1em 0; 
} 
.map { 
width: 350px; 
height: 350px; 
} 
.ui-tooltip { 
max-width: 350px; 


</style> 
<script> 
$(function() { 
$( document ).tooltip({ 
items: "img, [data-geo], [title]", 
content: function() { 
var element = $( this ); 
if ( element.is( "[data-geo]" ) ) { 
var text = element.text(); 
return "<img class='map' alt='" + text + 
"' src='http://maps.google.com/maps/api/staticmap?" + 
"Zoom=11&size=350x350&maptype=terrain&sensor=false&cent 
text + " oue 


if ( element.is( "[title]" ) ) t1 
return element.attr( "title" ); 


if ( element.is( "img" ) ) { 
return element.attr( "alt" ); 


ne == =] 


</script> 
</head> 
<body> 


<div class="ui-widget photo"> 
«div class="ui-widget-header ui-corner-all"» 
<h2> 圣 史蒂芬 大 教堂 (St. Stephen's Cathedral) </h2> 
<h3><a href="http://maps.google.com/maps?q=vienna, taustria&amp , 
</div> 
«a href="http://en.wikipedia.org/wiki/File:wien_Stefansdom_DSC02¢ 
<img src="img/st-stephens. jpg" alt=" 圣 史蒂芬 大 教堂 (St. Stephen&a 
</a> 
</div> 


<div class="ui-widget photo"> 
<div class="ui-widget-header ui-corner-all"> 
<h2> 塔 桥 (Tower Bridge) </h2> 
<h3><a href="http://maps.google.com/maps?q=london, +england&amp , 
</div> 
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Tv 
<img src="img/tower-bridge.jpg" alt=" 塔 桥 (Tower Bridge) " class 
</a> 
</div> 


<p> 所 有 的 图 片 源 自 <a href="http://commons.wikimedia.org/wiki/Main_Pag 


</body> 
</html> 





表单 


使 用 下 面 的 按钮 来 显示 帮助 文本 ， 或 者 只 需要 让 轧 标 悬 停 在 输入 框 上 或 者 让 输入 框 
获得 焦点 ， 即 可 显示 相应 输入 框 的 帮助 文本 。 


在 CSS 中 定义 一 个 固定 的 宽度 ， 让 同时 显示 所 有 的 帮助 文本 时 看 起 来 更 一 致 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 表单 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
label { 

display: inline-block; width: 5em; 

} 


fieldset div { 
margin-bottom: 2em; 


} 


fieldset .help { 


display: 
} 


inline-block; 


.ui-tooltip { 
width: 210px; 


} 
</style> 
<script> 


$(function() { 
var tooltips = $( "[title]" ).tooltip(); 
$( "«button»" ) 


.text( 


"Show help" ) 


.button() 
.click(function() { 
tooltips.tooltip( "open" ); 


}) 


.insertAfter( "form" ); 


3); 

</script> 
</head> 
<body> 


<form> 
«fieldset» 
«div» 
«label 
«input 
«/div» 
«div» 
«label 
«input 
«/div» 
«div» 
«label 
«input 
«/div» 


«/fieldset» 


«/form» 


«/body» 
«/html» 


nn m———————— Á— enmt 
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本 实例 中 的 工具 提 


随 鼠 标 移 动 。 


for="firstname">4+</label> 
id="firstname" name="firstname" title=" 请 提供 您 的 名 字 。" 


for="lastname"> 姓 氏 </label> 
id-"lastname" name="lastname" title=" 请 提供 您 的 姓氏 。"> 


for="address">ihit</label> 
id-"address" name="address" tit1le=" 您 的 家 庭 或 工作 地 址 。 "> 





示 框 是 相对 于 最 标 进行 定位 的 ， 当 最 标 在 元 素 上 移动 时 ， 它 会 跟 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 跟踪 鼠标 </tit1Le> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
label { 
display: inline-block; 
width: 5em; 
} 
</style> 
<script> 
$(function() { 
$( document ).tooltip({ 
track: true 
3): 
3); 
«/script» 
«/head» 
«body» 


<p><a href="#" title=" 部 件 的 名 称 ">Tooltips</a> 可 被 绑 定 到 任意 的 元 素 上 。¥ 
<p> 但 是 由 于 它 不 是 一 个 原生 的 工具 提示 框 ， 所 以 它 可 以 被 定义 样式 。 通 过 <a href="ht 
<p> 工 具 提 示 框 也 可 以 用 于 表单 元 素 ， 来 显示 每 个 区 域 中 的 一 些 额 外 的 信息 。</p> 
<p><label for="age"> 您 的 年 龄 : </label><input id="age" title=" 年 龄 仅 用 : 
<p> 基 停 在 相应 的 区 域 上 查看 工具 提示 框 。</p> 


</body> 
</html> 


视频 播放 器 


一 个 虚拟 的 视频 播放 器 ， 带 有 喜欢 /分 享 /统计 按钮 ， 每 个 按钮 都 带 有 自 定义 样式 的 
工具 提示 框 。 





<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 工具 提示 框 (Tooltip) - 视频 播放 器 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 


<style> 
.player { 
width: 500px; 
height: 300px; 
border: 2px groove gray; 
background: rgb(200, 200, 200); 
text-align: center; 
line-height: 300px; 
} 
.ui-tooltip { 
border: 1px solid white; 
background: rgba(20, 20, 20, 1); 
color: white; 
} 
.Set { 
display: inline-block; 
} 
.Notification { 
position: absolute; 
display: inline-block; 
font-size: 2em; 
padding: .5em; 
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); 
} 
</style> 
<script> 
$(function() { 
function notify( input ) ( 
var msg = "已 选择 " + $.trim( input.data( "tooltip-title" ) 
$( "<div>" ) 
.appendTo( document.body ) 
.text( msg ) 
.addClass( "notification ui-state-default ui-corner-bottom' 
.position({ 
my: "center top", 
at: "center top", 
of: window 


3) 
. show({ 

effect: "blind" 
3) 
.delay( 1000 ) 
.hide(( 


effect: "blind", 
duration: "slow" 
}, function() { 
$( this ).remove(); 
3); 
} 


$( "button" ).each(function() { 
var button = $( this ).button({ 
icons: { 


primary: $( this ).data( "icon" ) 
3 
text: !!$( this ).attr( "title" ) 
3); 
button.click(function() { 
notify( button ); 
3); 


3); 
$( ".set" ).buttonset({ 


items: "button" 


1): 


$( document ).tooltip({ 
position: ( 
my: "center top", 
at: "center bottom+5", 


}, 
show: { 
duration: "fast" 
}, 
hide: { 
effect: "hide" 
} 
31); 
p); 
</script> 
</head> 
<body> 


«div class="player"> 这 里 是 视频 (HTML5?)</div> 
<div class="tools"> 
<span class="set"> 
<button data-icon="ui-icon-circle-arrow-n" title=" 我 喜欢 这 个 视频 " 
«button data-icon="ui-icon-circle-arrow-s"> 我 不 喜欢 这 个 视频 </butt 
</span> 
<div class="set"> 
«button data-icon="ui-icon-circle-plus" title=" 添 加 到 播放 列表 "> 添 
«button class="menu" data-icon="ui-icon-triangle-1-s"> 添 加 到 收藏 
</div> 
<button title=" 分 享 这 个 视频 "> 分 享 </button> 
«button data-icon="ui-icon-alert"> 标 记 为 不 恰当 </button> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 特效 (Effect) 


对 一 个 元 素 应 用 动画 特效 。 
如 需 了 解 更 多 有 关 .effect() 方法 的 细节 ， 请 查看 API 文档 .effect()。 


.effect() 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .effect() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button ( padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; height: 135px; padding: 0.4em; positior 
#effect h3 { margin: 0; padding: ©.4em; text-align: center; } 
.ui-effects-transfer { border: 2px dotted gray; } 
</style> 
<script> 
$(function() { 
// 运行 当前 选中 的 特效 
function runEffect() { 
// 从 中 获取 特效 类 型 
var selectedEffect = $( "#effectTypes" ).val(); 


// 大 多 数 的 特效 类 型 默认 不 需要 传递 选项 
var options = {}; 
// 一 些 特效 带 有 必需 的 参数 


if ( selectedEffect === "scale" ) { 

options = { percent: 0 }; 
} else if ( selectedEffect === "transfer" ) { 

options = { to: "#button", className: "ui-effects-transfer' 
} else if ( selectedEffect === "size" ) { 

options = { to: { width: 200, height: 60 } }; 


} 


// 运行 特效 
$( "#effect" ).effect( selectedEffect, options, 500, callbacl 
}; 


// 回调 图 数 
function callback() { 
setTimeout(function() { 
$( "#effect" ).removeAttr( "style" ).hide().fadeIn(); 
), 1000 ); 
3 


// 根据 选择 菜单 值 设置 特效 
$( "#button" ).click(function() { 
runEffect(); 
return false; 
3); 
p); 
</script> 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="ui-widget-content ui-corner-all"> 
<h3 class="ui-widget-header ui-corner-all"> 特 效 (Effect) </h3> 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<select name="effects" id="effectTypes"> 
<option value="blind"> 百 叶 窗 特效 (Blind Effect) </option> 
<option value="bounce"> 反 弹 特 效 (Bounce Effect) </option> 
«option value-"clip"»23$354 REX (Clip Effect) </option> 
«option value="drop"> 降 落 特效 (Drop Effect) </option> 
«option value="explode"> 爆 炸 特效 (Explode Effect) </option> 
«option value="fade"> 淡 入 淡出 特效 (Fade Effect) </option> 
<option value="fold"> 折 县 特效 (Fold Effect) </option> 
<option value="highlight"> 突 出 特效 (Highlight Effect) </option> 
«option value="puff"> 膨 胀 特效 (Puff Effect) </option> 
«option value="pulsate"> 跳 动 特效 (Pulsate Effect) </option> 
<option value="scale"> 缩 放 特 效 (Scale Effect) </option> 
«option value="shake"> 震 动 特效 (Shake Effect) </option> 
<option value="size"> 尺 寸 特效 (Size Effect) </option> 
<option value="slide"> 滑 动 特效 (Slide Effect) </option> 
«option value="transfer"> 转 移 特 效 (Transfer Effect) </option> 
</select> 


«a href="#" id="button" class="ui-state-default ui-corner-all"> 运 行 


</body> 
</html> 
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Easing 演示 


本 实例 使 用 HTML Canvas 元 素 ， 绘 制 了 jQuery Ul 提供 的 所 有 easings。 点 击 每 
个 图 可 查看 该 easing 的 行为 。。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - Easing 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.graph { 
float: left; 
margin-left: 10px; 
} 
</style> 
<script> 
$(function() { 
if ( !$( "<canvas>" )[0].getContext ) { 
$( "<div>" ).text( 
"您 的 浏览 器 不 支持 canvas， 本 演示 需要 在 支持 canvas 的 浏览 器 下 进行 。" 
).appendTo( "#graphs" ); 
return; 


} 


var i = 0, 
width - 100, 
height - 100; 


$.each( $.easing, function( name, impl ) { 
var graph = $( "<div>" ).addClass( "graph" ).appendTo( "£Zgra[ 
text = $( "<div>" ).text( ++i + ". " + name ).appendTo( gr: 
wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hi« 
canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; 


canvas.width = width; 
canvas.height = height; 
var drawHeight = height * 0.8, 
Cradius = 10; 
ctx = canvas.getContext( "2d" ); 
ctx.fillStyle = "black"; 


// 绘制 背景 

ctx.beginPath(); 

ctx.moveTo( cradius, 0 ); 

ctx.quadraticCurveTo( ©, ©, ©, cradius ); 

ctx.lineTo( ©, height - cradius ); 

ctx.quadraticCurveTo( 0, height, cradius, height ); 
ctx.lineTo( width - cradius, height ); 

ctx.quadraticCurveTo( width, height, width, height - cradius 


ctx.lineTo( width, © ); 
ctx.lineTo( cradius, © ); 
CX talk 


// 绘制 底线 

ctx.strokeStyle = "#555"; 
ctx.beginPath(); 

ctx.moveTo( width * 0.1, drawHeight 
ctx.lineTo( width * 0.9, drawHeight 
ctx.stroke(); 


+ 十 
a 0 
Å 


// 绘制 顶 线 
ctx.strokeStyle = "#555"; 
ctx.beginPath(); 
ctx.moveTo( width 
ctx.lineTo( width 
ctx.stroke(); 


* 0.1, drawHeight * .3 - 
509207 


drawHeight * .3 - 


// 绘制 easing 
ctx.strokeStyle - "white"; 
ctx.beginPath(); 
ctx.linewidth - 2; 
ctx.moveTo( width * 0.1, drawHeight ); 
$.each( new Array( width ), function( position ) { 
var state - position / width, 
val = impl( state, position, 0, 1, width ); 
ctx.lineTo( position * 0.8 + width * 0.1, 
drawHeight - drawHeight * val * 0.7 ); 
3); 


ctx.stroke(); 


// 点 击 时 动态 改变 
graph.click(function() { 
wrap 
.animate( { height: "hide" }, 2000, name ) 
.delay( 800 ) 
.animate( { height: "show" }, 2000, name ); 


}); 


graph.width( width ).height( height + text.height() + 10 ); 
19/5 
1); 
«/script» 
«/head» 
«body» 


«div id="graphs"></div> 


«/body» 
«/html» 








jQuery Ul 实例 - 显示 (Show) 


使 用 自 定 义 效 果 来 显示 匹配 的 元 素 。 
如 需 了 解 更 多 有 关 .show() 方法 的 细节 ， 请 查看 API 文档 .show()。 


.Show() 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .show() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; height: 135px; padding: ©.4em; position: 
#effect h3 { margin: 0; padding: ©.4em; text-align: center; } 
</style> 
<script> 
$(function() { 
// 运行 当前 选中 的 特效 
function runETfect() { 
// 从 中 获取 特效 类 型 
var selectedEffect = $( "#effectTypes" ).val(); 


// 大 多 数 的 特效 类 型 默认 不 需要 传递 选项 
var options = {}; 


// 一 些 特效 带 有 必需 的 参数 


if ( selectedEffect === "Scale" ) { 
options = { percent: 100 }; 
} else if ( selectedEffect === "size" ) { 


options = { to: { width: 280, height: 185 } }; 


// 运行 特效 
$( "#effect" ) .Show( selectedEffect, options, 500, callback ` 
J; 


// [SER 
function callback() { 
setTimeout(function() { 


$( "#effect:visible" ).removeAttr( "style" ).fadeOut(); 
}, 1000 ); 
H 


// 根据 选择 菜单 值 设置 特效 

$( "#button" ).click(function() { 
runEffect(); 
return false; 


3); 


$( "#effect" ).hide(); 
1); 
«/script» 
«/head» 
<body> 


<div class="toggler"> 
«div id="effect" class="ui-widget-content ui-corner-all"> 
<h3 class="ui-widget-header ui-corner-all">% (Show) </h3> 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<select name="effects" id="effectTypes"> 
«option value="blind"> 百 叶 窗 特效 (Blind Effect) </option> 
«option value="bounce"> 反 弹 特 效 (Bounce Effect) </option> 
<option value="clip">S34¢ +33 (Clip Effect) </option> 
<option value="drop"> 降 落 特效 (Drop Effect) </option> 
«option value="explode"> 爆 炸 特 效 (Explode Effect) </option> 
<option value="fold">#71 tF% (Fold Effect) </option> 
«option value="highlight"> 突 出 特效 (Highlight Effect) </option> 
«option value="puff"> 膨 胀 特效 (Puff Effect) </option> 
«option value="pulsate"> 跳 动 特效 (Pulsate Effect) </option> 
<option value="scale"> 缩 放 特 效 (Scale Effect) </option> 
<option value="shake"> 震 动 特效 (Shake Effect) </option> 
<option value="size"> 尺 寸 特效 (Size Effect) </option> 
<option value="slide"> 滑 动 特 效 (Slide Effect) </option> 

</select> 


<a href="#" id="button" class="ui-state-default ui-corner-all"> 运 行 


</body> 
</html> 


a] = xm 





jQuery UI 实例 - 隐藏 (Hide) 


使 用 自 定 义 效果 来 隐藏 匹配 的 元 素 。 
如 需 了 解 更 多 有 关 .hide() 方法 的 细节 ， 请 查看 API 文档 .hide()。 


.hide() 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .hide() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; height: 135px; padding: ©.4em; position: 
#effect h3 { margin: 0; padding: ©.4em; text-align: center; } 
</style> 
<script> 
$(function() { 
// 运行 当前 选中 的 特效 
function runETfect() { 
// 从 中 获取 特效 类 型 
var selectedEffect = $( "#effectTypes" ).val(); 


// 大 多 数 的 特效 类 型 默认 不 需要 传递 选项 
var options = {}; 


// 一 些 特 效 带 有 必需 的 参数 


if ( selectedEffect === "scale" ) { 
options = { percent: 0 }; 
} else if ( selectedEffect === "size" ) { 


options = { to: { width: 200, height: 60 } }; 


// 运行 特效 
$( "#effect" ) .hide( selectedEffect, options, 1000, callback 
J; 


// [SER 
function callback() { 
setTimeout(function() { 


$( "#effect" ).removeAttr( "style" ).hide().fadeIn(); 
), 1000 ); 
H 


// 根据 选择 菜单 值 设置 特效 
$( "#button" ).click(function() { 
runEffect(); 
return false; 
3); 
3); 
«/script» 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="ui-widget-content ui-corner-all"> 
<h3 class-"ui-widget-header ui-corner-all">(4ig (Hide) </h3> 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<select name="effects" id="effectTypes"> 
«option value="blind"> 百 叶 窗 特效 (Blind Effect) </option> 
«option value="bounce"> 反 弹 特 效 (Bounce Effect) </option> 
«option value-"clip"»23334 4X (Clip Effect) </option> 
<option value="drop"> 降 落 特 效 (Drop Effect) </option> 
<option value="explode"> 爆 炸 特效 (Explode Effect) </option> 
<option value="fold">#71# +s (Fold Effect) </option> 
«option value="highlight"> 突 出 特效 (Highlight Effect) </option> 
«option value=" puff" >Hi ante (Puff Effect) </option> 
<option value="pulsate"> 跳 动 特效 (Pulsate Effect) </option> 
«option value="scale"> 缩 放 特 效 (Scale Effect) </option> 
«option value="shake"> 震 动 特效 (Shake Effect) </option> 
<option value="size"> 尺 寸 特效 (Size Effect) </option> 
<option value="slide"> 滑 动 特效 (Slide Effect) </option> 

</select> 


<a href="#" id="button" class="ui-state-default ui-corner-all"> 运 行 


</body> 
</html> 
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jQuery UI 实例 - 切换 (Toggle) 


使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 素 。 
如 需 了 解 更 多 有 关 .toggle() 方法 的 细节 ， 请 查看 API 文档 .toggle()。 


.toggle() 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .toggle() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { 
width: 500px; 
height: 200px; 


#button { 
padding: .5em 1em; 
text-decoration: none; 


} 

#effect { 
position: relative; 
width: 240px; 
height: 135px; 
padding: 0.4em; 


} 

#effect h3 { 
margin: 0; 
padding: 0.4em; 
text-align: center; 


} 
</style> 
<script> 
$(function() { 
// 运行 当前 选中 的 特效 
function runEffect() { 
// 从 中 获取 特效 类 型 
var selectedEffect = $( "#effectTypes" ).val(); 


// 大 多 数 的 特效 类 型 默认 不 需要 传递 选项 


var options = {}; 
// 一 些 特效 带 有 必需 的 参数 


if ( selectedEffect === "Scale" ) { 
options = { percent: 0 }; 
} else if ( selectedEffect === "size" ) { 
options - ( to: ( width: 200, height: 60 ) Y; 
} 


// 运行 特效 
$( "#effect" ).toggle( selectedEffect, options, 500 ); 
J; 


// 根据 选择 菜单 值 设置 特效 
$( "#button" ).click(function() { 
runEffect(); 
return false; 
3); 
3); 
</script> 
</head> 
<body> 


<div class="toggler"> 
«div id="effect" class="ui-widget-content ui-corner-all"> 
«h3 class="ui-widget-header ui-corner-all">H# (Toggle) </h3> 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<select name="effects" id="effectTypes"> 
«option value="blind"> 百 叶 窗 特效 (Blind Effect) </option> 
<option value="bounce"> 反 弹 特 效 (Bounce Effect) </option> 
«option value-"clip"»23$34 4X (Clip Effect) </option> 
«option value="drop"> 降 落 特效 (Drop Effect) </option> 
«option value="explode"> 爆 炸 特效 (Explode Effect) </option> 
<option value="fold">#1 tF% (Fold Effect) </option> 
«option value="highlight"> 突 出 特效 (Highlight Effect) </option> 
«option value="puff"> 膨 胀 特效 (Puff Effect) </option> 
«option value="pulsate"> 跳 动 特效 (Pulsate Effect) </option> 
<option value="scale"> 缩 放 特 效 (Scale Effect) </option> 
<option value="shake"> 震 动 特效 (Shake Effect) </option> 
<option value="size"> 尺 寸 特效 (Size Effect) </option> 
<option value="slide"> 滑 动 特效 (Slide Effect) </option> 

</select> 


<a href="#" id="button" class="ui-state-default ui-corner-all"> 运 行 


</body> 
</html> 











W3School jQuery UI 教程 


jQuery UI 实例 - 切换 (Toggle) 236 


jQuery UI 实例 - 添加 Class (Add Class) 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 添 加 指定 的 Class. 
如 需 了 解 更 多 有 关 .addclass() 方法 的 细节 ， 请 查看 API 文档 .addClass()。 


.addClass() 演示 


点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .addClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; padding: 1em; font-size: 1.2em; bord: 
.hewClass ( text-indent: 40px; letter-spacing: .4em; width: 41( 
</style> 
<script> 
$(function() { 
$( "#button" ).click(function() { 
$( "#effect" ).addClass( "newClass", 1000, callback ); 
return false; 


3); 


function callback() { 
setTimeout(function() { 
$( "#effect" ).removeClass( "newClass" ); 
}, 1500 ); 
} 
3); 
</script> 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="ui-corner-all"> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</div> 
</div> 


<a href="#" id="button" class="ui-state-default ui-corner-all'"»izí17 


</body> 
</html> 
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jQuery UI 实例 - BR Class (Remove Class) 


M AERAR t, ALAM REAANNS Tce eR Class, 
如 需 了 解 更 多 有 关 .removeclass() 方法 的 细节 ， 请 查看 API 文档 


.removeClass()。 


.removeClass() 演示 


点 击 按钮 预览 特效 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .removeClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { position: relative; width: 240px; padding: 1em; leti 
.hewClass { text-indent: 40px; letter-spacing: .4em; width: 410p) 
</style> 
<script> 
$(function() { 

$( "#button" ).click(function() { 
$( "#effect" ).removeClass( "newClass", 1000, callback ); 
return false; 


3); 


function callback() { 
setTimeout(function() { 
$( "#effect" ).addClass( "newClass" ); 
}, 1500 ); 
} 
3); 
</script> 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="newClass ui-corner-all"> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. £ 
«/div» 
«/div» 


<a href="#" id="button" class="ui-state-default ui-corner-all'"»iz17 


</body> 
</html> 


一 一 





jQuery UI 实例 - 切换 Class (Toggle Class) 


当 动 男 样 式 改 变 时 ， 根 据 Class 是 否 存在 以 及 switch 参数 的 值 ， 为 匹配 的 元 素 集合 
内 的 每 个 元 素 添 加 或 移 除 一 个 或 多 个 Class。 


如 需 了 解 更 多 有 关 .toggleclass() 方法 的 细节 ， 请 查看 API 文档 
.toggleClass()。 


.toggleClass() 演示 


点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .toggleClass() 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect {position: relative; width: 240px; padding: 1em; lette! 
.hewClass { text-indent: 40px; letter-spacing: .4em; width: 410p) 
</style> 
<script> 
$(function() { 
$( "#button" ).click(function() { 
$( "#effect" ).toggleClass( "newClass", 1000 ); 
return false; 
3); 
3); 
«/script» 
</head> 
<body> 


<div class="toggler"> 
«div id="effect" class="newClass ui-corner-all"> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</div> 
</div> 


地 二 


«a href="#" id-"button" class="ui-state-default ui-corner-all'»iz17 


«/body» 
«/html» 
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jQuery UI 实例 - 转换 Class (Switch Class) 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 添加 和 移 除 指定 的 Class. 


如 需 了 解 更 多 有 关 .switchclass() 方法 的 细节 ， 请 查看 API 文档 
.switchClass(). 


.switchClass() 演示 


点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - .switchClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.9.1.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { position: relative; } 
.hewClass { width: 240px; padding: 1em; letter-spacing: 0; font. 
.anotherNewClass { text-indent: 40px; letter-spacing: .4em; widtt 
</style> 
<script> 
$(function() { 
$( "#button" ).click(function(){ 
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 
$( ".anotherNewClass" ).switchClass( "anotherNewClass", "new 
return false; 
3); 
3); 
«/script» 
«/head» 
«body» 


«div class="toggler"> 
«div id="effect" class="newClass ui-corner-all"> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</div> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 颜色 动画 (Color Animation) 


使 用 .animate() 实现 颜色 动画 效果 。 


如 需 了 解 更 多 有 关 颜 色 动 画 (Color Animation) 的 细节 ， 请 查看 API 文档 颜色 动 
画 (Color Animation) 。 


jQuery UI 捆绑 了 jQuery Color 插件 ，jQuery Color 插件 提供 了 颜色 动画 及 其 他 许 
多 和 与 颜色 相关 的 实用 功能 。 


动画 (Animation) 演示 
点 击 按钮 预览 特效 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 特效 - 动画 (Animation) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
«script srcz"//code.jquery.com/ui/1.10.4/jquery-ui.js"»«/script» 
«link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.toggler { width: 500px; height: 200px; position: relative; } 
#button { padding: .5em 1em; text-decoration: none; } 
#effect { width: 240px; height: 135px; padding: 0.4em; positior 
#effect h3 { margin: 0; padding: ©.4em; text-align: center; } 
</style> 
<script> 
$(function() { 
var state = true; 
$( "#button" ).click(function() { 
if ( state ) { 
$( "#effect" ).animate({ 
backgroundColor: "#aa0000", 
color: "#fff", 


width: 500 
}, 1000 ); 
} else { 


$( "#effect" ).animate({ 
backgroundColor: "#fff", 
color: "#000", 
width: 240 

jJ, 1000 ); 


state - !state; 


3); 


3); 

</script> 
</head> 
<body> 


<div class="toggler"> 
<div id="effect" class="ui-widget-content ui-corner-all"> 
<h3 class="ui-widget-header ui-corner-all"># Hj (Animation) «/h3 
<p> 
Etiam libero neque, luctus a, eleifend nec, semper at, lorem 
</p> 
</div> 
</div> 


<a href="#" id="button" class="ui-state-default ui-corner-all">W# 


</body> 
</html> 
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jQuery UI 实例 - fz (Position) 


相对 窗口 、 文 档 、 锚 、 光 标 /鼠标 等 元 素 定位 一 个 元 素 。 
如 需 了 解 更 多 有 关 .position() 方法 的 细节 ， 请 查看 API 文档 .position()。 


默认 功能 
使 用 表单 控件 配置 位 置 ， 或 者 拖 搜 被 定位 的 元 素来 修改 它 的 偏 移 量 。 向 四 周 拖 搜 父 
元 素来 查看 碰撞 检测 。 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI 定位 (Position) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
#parent { 


} 


width: 60%; 

height: 40px; 

margin: 10px auto; 
padding: 5px; 

border: 1px solid #777; 
background-color: #fbca93; 
text-align: center; 


.positionable { 


} 


position: absolute; 
display: block; 

right: 0; 

bottom: 0; 
background-color: #bcd5e6; 
text-align: center; 


#positionable1 { 


} 


width: 75px; 
height: 75px; 


#positionable2 { 


width: 120px; 
height: 40px; 


select, input { 


margin-left: 15px; 


j 
</style> 
<script> 
$(function() { 
function position() { 
$( ".positionable" ).position({ 
of: $( "£parent" ), 


my: $( "4my horizontal" ).val() + "" + $( "4my vertical" ` 

at: $( "4at horizontal" ).val() +" " + $( "Zat vertical" ` 

collision: $( "#collision_horizontal" ).val() +"" + $( "+ 
}); 


} 
$( ".positionable" ).css( "opacity", 0.5 ); 
$( "select, input" ).bind( "click keyup change", position ); 


$( "#parent" ).draggable({ 
drag: position 


3); 
position(); 
1); 
</script> 
</head> 
<body> 
«div id="parent"> 
<p> 
这 是 父 元 素 的 位 置 。 
</p> 
</div> 


«div class="positionable" id="positionable1"> 
<p> 
to position 
</p> 

</div> 


<div class="positionable" id="positionable2"> 
<p> 
to position 2 
</p> 

</div> 


<div style="padding: 20px; margin-top: 75px;"> 
fe (ee 
<div style="padding-bottom: 20px;"> 
<b>my : </b> 
<select id="my_horizontal"> 
<option value="left">left</option> 
«option value="center">center</option> 
<option value="right">right</option> 


</select> 
<select id="my_vertical"> 
<option value="top">top</option> 
<option value="center">center</option> 
<option value="bottom">bottom</option> 
</select> 
</div> 
<div style="padding-bottom: 20px;"> 
<b>at : </b> 
<select id="at_horizontal"> 
<option value="left">left</option> 
«option value="center">center</option> 
<option value="right">right</option> 
</select> 
<select id="at_vertical"> 
<option value="top">top</option> 
«option value="center">center</option> 
<option value="bottom">bottom</option> 
</select> 
</div> 
<div style="padding-bottom: 20px;"> 
<b>collision: </b> 
<select id="collision_horizontal"> 
<option value="flip">flip</option> 
<option value="fit">fit</option> 
<option value="flipfit">flipfit</option> 
<option value="none">none</option> 
</select> 
<select id="collision_vertical"> 
<option value="flip">flip</option> 
<option value="fit">fit</option> 
<option value="flipfit">flipfit</option> 
<option value="none">none</option> 
</select> 
</div> 
</div> 


</body> 
</html> 
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像 循环 


一 个 照片 浏览 器 的 原型 ， 使 用 Position 分 别 把 图 片 定 为 在 左边 、 中 间 、 右 边 ， 然 后 
循环 显示 。 使 用 顶部 的 链接 来 循环 图 像 ， 或 者 在 图 像 的 左 侧 或 右 侧 点 击 来 循环 图 
像 。 请 注意 ， 当 调整 窗口 大 小 时 ， 会 重新 定位 图 像 。 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>jQuery UI 定位 (Position) - 图 像 循 环 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
body { 

margin: 0; 
} 
#container { 

overflow: hidden; 

position: relative; 

height: 400px; 
} 


img { 
position: absolute; 
} 
</style> 
<script> 
$(function() { 
// 重 构 部 件 ， 去 除 这 些 插 件 方法 
$.fn.left = function( using ) { 
return this.position({ 
my: "right middle", 
at: "left+25 middle", 
of: "#container", 
collision: "none", 
using: using 
3); 
J; 
$.fn.right = function( using ) { 
return this.position({ 
my: "left middle", 
at: "right-25 middle", 
of: "#container", 
collision: "none", 
using: using 
3); 
$.fn.center - function( using ) ( 
return this.position({ 
my: "center middle", 
at: "center middle", 
of: "#container", 
using: using 
3); 
J; 


$( "img:eq(0)" ).left(); 
$( "img:eq(1)" ).center(); 
$( "img:eq(2)" ).right(); 


function animate( to ) { 
$( this ).stop( true, false ).animate( to ); 


function next( event ) { 

event.preventDefault(); 

$( "img:eq(2)" ).center( animate ); 

$( "img:eq(1)" ).left( animate ); 

$( "img:eq(0)" ).right().appendTo( "#container" ); 
} 
function previous( event ) { 

event .preventDefault(); 

$( "img:eq(0)" ).center( animate ); 

$( "img:eq(1)" ).right( animate ); 

$( "img:eq(2)" ).left().prependTo( "#container" ); 


$( "previous" ).click( previous ); 
$( "#next" ).click( next ); 


$( "img" ).click(function( event ) { 
$( "img" ).index( this ) === © ? previous( event ) : next( e 


3); 


$( window ).resize(function() { 
$( "img:eq(0)" ).left( animate ); 
$( "img:eq(1)" ).center( animate ); 
$( "img:eq(2)" ).right( animate ); 
3); 
3); 
«/script» 
«/head» 
«body» 


«div id="container"> 
«img src-"img/earth.jpg" width="458" height="308" alt="earth"> 
<img src="img/flight.jpg" width="512" height="307" alt="flight"> 
<img src="img/rocket.jpg" width="300" height="353" alt="rocket"> 


<a id=" previous href="#"> 上 一 个 </a> 
<a id="next" href="#"> 下 一 个 </a> 
</div> 


</body> 
</html> 
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jQuery UI 实例 - 部 件 库 (Widget Factory) 


使 用 与 所 有 jQuery UI 小 部 件 相 同 的 抽象 化 来 创建 有 状态 的 jQuery 插件 。 


如 需 了 解 更 多 有 关 部 件 库 (Widget Factory) 的 细节 ， 请 查看 API 文档 部 件 库 
(Widget Factory) 。 


默认 功能 


该 演示 展示 了 一 个 简单 的 使 用 部 件 库 queryui.widgetjs) 创建 的 自 定义 的 小 部 
件 。 


三 个 区 块 是 以 不 同 的 方式 初始 化 的 。 点 击 改变 他 们 的 背景 颜色 。 查 看 源码 及 注释 理 
解 工 作 原 理 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI 部 件 库 (Widget Factory) - 默认 功能 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.9.1.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos, 
<style> 
.custom-colorize { 
font-size: 20px; 
position: relative; 
width: 75px; 
height: 75px; 
} 
.CUStom-colorize-changer { 
font-size: 10px; 
position: absolute; 


right: 0; 
bottom: 0; 
} 
</style> 
<script> 


$(function() { 

// 部 件 定义 ， 其 中 "custom" 是 命名 空间 ，"colorize" 是 部 件 名 称 
$.widget( "custom.colorize", { 

// 默认 选项 

options: { 

red: 255, 

green: ©, 

blue: 0, 


// 回调 
change: null, 
random: null 


ty 


// HERZ 
_create: function() { 
this.element 
// 添加 一 个 主题 化 的 class 
.addClass( "custom-colorize" ) 
// 防止 双击 来 选择 文本 
.disableSelection(); 


this.changer = $( "<button>", { 
text: "改变 "， 
"Class": "custom-colorize-changer" 
}) 
.appendTo( this.element ) 
.button(); 


// 绑 定 changer 按钮 上 的 click 事件 到 random 方法 
this. on( this.changer, { 

// 当 小 部 件 被 禁用 时 ，_on 不 会 调用 random 

click: "random" 


}); 


this._refresh(); 


ty 


// 当 创建 及 之 后 改变 选项 时 调用 
_refresh: function() { 
this.element.css( "background-color", "rgb(" + 
this.options.red +"," + 
this.options.green + "," + 
this.options.blue + ")" 


); 


// 触发 一 个 回调 /事件 
this. trigger( "change" ); 


ty 


// 一 个 改变 颜色 为 随机 值 的 公共 方法 
// 可 通过 .colorize( "random" ) 直接 调用 
random: function( event ) { 
var colors = { 
red: Math.floor( Math.random() * 256 ), 
green: Math.floor( Math.random() * 256 ), 
blue: Math.floor( Math.random() * 256 ) 


H 
// 触发 一 个 事件 ， 检 查 是 否 已 取消 
if ( this. trigger( "random", event, colors ) !-- false )… 


this.option( colors ); 


j 


ty 


// 自动 移 除 通过 _on 绑 定 的 事件 
// 在 这 里 重 置 其 他 的 修改 
_destroy: function() { 

// 移 除 生成 的 元 素 


this.changer.remove(); 


this.element 
.removeClass( "custom-colorize" ) 
.enableSelection() 
.css( "background-color", "transparent" ); 


ty 


// _setOptions 是 通过 一 个 带 有 所 有 改变 的 选项 的 哈 希 来 调用 的 
// 当 改 变 选项 时 总 是 刷新 
_setOptions: function() { 

// _super 和 _superApply 

this. superApply( arguments ); 

this. refresh(); 


// _setOption 是 为 每 个 独立 的 改变 的 选项 调用 的 
_setOption: function( key, value ) { 
// 防止 无 效 的 颜色 值 
if ( /red|green|blue/.test(key) && (value < 0 || value > 2! 
return; 


this. super( key, value ); 
} 
3); 


// 通过 默认 选项 进行 初始 化 
$( "#my-widget1" ).colorize(); 


// 通过 两 个 自 定 义 的 选项 进行 初始 化 
$( "#my-widget2" ).colorize({ 


red: 60, 
blue: 60 
3); 


// 通过 自 定义 的 green 值 和 一 个 只 允许 颜色 足够 绿 的 随机 的 回调 进行 初始 化 
$( "#my-widget3" ).colorize( { 
green: 128, 
random: function( event, ui ) { 
return ui.green > 128; 


} 
3): 
// 点 击 切换 enabled/disabled 
$( "#disable" ).click(function() { 


// 为 每 个 小 部 件 使 用 自 定义 的 选择 器 来 找到 所 有 的 实例 
// 所 有 的 实例 一 起 切换 ， 所 以 我 们 可 以 从 第 一 个 开始 检查 状态 


if ( $( ":custom-colorize" ).colorize( "option", "disabled" ` 
$( ":custom-colorize" ).colorize( "enable" ); 

) else ( 
$( ":custom-colorize" ).colorize( "disable" ); 


} 
}); 
// 在 初始 化 后 ， 点 击 设 置 选项 
$( "#black" ).click( function() { 


$( ":custom-colorize" ).colorize( "option", { 
red: 0, 


</script> 
</head> 
<body> 


<div> 
<div id="my-widget1"> 改 变 颜色 </div> 
«div id="my-widget2"> 改 变 颜色 </div> 
<div id="my-widget3"> 改 变 颜 色 </div> 
<button id="disable"> 切 换 disabled 选项 </button> 
<button id="black"> 改 为 黑色 </button> 
</div> 


</body> 
</html> 





jQuery UI API 参考 


jQuery UI API 类 别 - 特效 (Effects) 


jQuery UI 在 jQuery 内 置 的 特效 上 添加 了 一 些 功能 。jQuery UI 支持 颜色 动画 和 
Class 转换 ， 同 时 也 提供 了 一 些 额外 的 Easings。 另外 ， 提 供 了 一 套 完 整 的 定制 特 


效 ， 供 显示 和 隐藏 元 素 时 或 者 只 是 添加 一 些 视觉 显示 时 使 用 。 
API 描述 也 属于 类 别 
当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 a aae ses 
.addClass() 集合 内 的 每 个 元 素 添加 指定 的 (Method ‘ 
Class. Overrides) 
百叶 窗 特 效 百叶 窗 特 效 (Blind Effect) 通过 将 
(Blind 元 素 包 应 在 一 个 容器 内 ， 采 用 " 拉 百 
Effect) 叶 窗 "效果 来 隐藏 或 显示 元 素 。 
eee 反弹 特效 (Bounce Effect) 反弹 一 
a TR. ^ri BER 
Effect) 时 ， 最 后 一 次 或 第 一 次 反弹 会 呈现 
淡 入 /淡出 效果 。 


Sis (Clip 


Effect) ASCH, 
j Ah EB] . " 
"ur 使 用 .animate() 实现 颜色 动画 效 
Animation) Ro 
降落 特效 降落 特效 (Drop Effect) 通过 单个 
(Drop 方向 滑动 的 淡 入 淡出 来 隐藏 或 显示 
Effect) 二 个 元 来 
| Easing 画 数 指定 动画 在 不 同 点 上 的 
paning 行进 速度 。 
特效 核心 (Effects 
.effect() 对 一 个 元 素 应 用 动画 特效 。 Core) | JI FA 
(Method) 

爆炸 特效 爆炸 特效 (Explode Effect) 通过 把 

(Explode 元 素 裂 成 碎片 来 隐藏 或 显示 一 个 元 
Effect) 素 。 
淡 入 淡出 特效 淡 入 淡出 特效 (Fade Effect) 通过 

(Fade 淡 入 淡出 元 素来 隐藏 或 显示 一 个 元 


Effect) 


剪辑 特效 (Clip Effect) 通过 垂直 或 
水 平方 向 夹 剪 元 素来 隐藏 或 显示 一 


素 。 
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(Fold Effect) 


hide() 


突出 特效 
(Highlight 

Effect) 

膨胀 特效 (Puff 

Effect) 


跳动 特效 
(Pulsate 
Effect) 


.removeClass() 


缩放 特效 
(Scale 
Effect) 


震动 特效 
(Shake 
Effect) 


.show() 


尺寸 特效 
(Size Effect) 


滑动 特效 
(Slide 
Effect) 


.SwitchClass() 


.toggle() 


jQuery UI API X 3 


素来 隐藏 或 显示 一 个 元 素 。 


特效 核心 (Effects 
Core) | 方法 重 载 
(Method 
Overrides) | 方法 
(Method) 


使 用 自 定 义 效果 来 隐藏 匹配 的 元 


7INo 


突出 特效 (Highlight Effect) 通过 首 
先 改变 背景 颜色 来 隐藏 或 显示 一 个 
元 素 。 


通过 在 缩放 元 素 的 同时 隐藏 元 素来 
创建 膨胀 特效 (Puff Effect) 。 


跳动 特效 (Pulsate Effect) 38:1 BE 
动 来 隐藏 或 显示 一 个 元 素 。 


特效 核心 (Effects 
Core) | JAER 
(Method 
Overrides) 


当 动 画 样式 改变 时 ， 为 匹配 的 元 素 
集合 内 的 每 个 元 素 移 除 指定 的 


Class. 


按照 某 个 百分比 缩放 元 素 。 


垂直 或 水 平方 向 多 次 震动 元 素 。 


特效 核心 (Effects 
Core) | 方法 重 载 
(Method 
Overrides) | 方法 
(Method) 


使 用 自 定 义 效果 来 显示 匹配 的 元 


7INo 


调整 元 素 尺 寸 到 指定 宽度 和 高 度 。 


把 元 素 滑 动 出 视 区 。 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 
集合 内 的 每 个 元 素 添加 和 移 除 指定 
的 Class。 


特效 核心 (Effects 
Core) 


特效 核心 (Effects 
Core) | RH 
MAR MRM RMB mena 


的 元 素 。 


- 特效 (Effects) 
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的 元 素 。 


当 动 男 样 式 改变 时 ， us Class 是 
否 存在 以 及 switch 参数 的 值 ， 为 匹 

toggleClass() ， 配 的 元 素 集合 内 的 每 个 元 素 添 加 或 
移 除 一 个 或 多 个 Class。 


panes 把 一 个 元 素 的 轮 廊 转移 到 另 一 个 元 
Effect) mE 


jQuery UI API X 3! - 特效 (Effects) 


Overrides) | 方法 
(Method) 


特效 核心 (Effects 
Core) | JAER 
(Method 
Overrides) 


jQuery UI API - .addClass() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) 
用 法 


描述 : 当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集合 内 的 每 个 元 素 添 加 指定 的 Class. 
返回 : jQuery 


.addClass( className [, duration ] [, easing ] [, complete ] ) 


we a g M. 
参数 类 型 描述 默认 
值 
要 添加 到 每 个 匹配 的 元 素 的 class 属性 中 
className String 的 一 个 或 多 个 class 名 称 ， 多 个 class 名 
称 用 空格 分 隔 。 
Number 一 个 字符 串 或 一 个 数字 ， 指 定 动画 将 运行 
duration 或 String BX. 400 
一 个 空 b- \ i K 
easing String 一 个 字符 串 ， 指 示 要 使 用 的 easing K Sins 


o 


complete Function) — E z/i&ise px ed 2 38 FH BER ZA, 


.addClass( className [, options ] ) 


参数 类 型 描述 


要 添加 到 每 个 匹配 的 元 素 的 class 属性 中 的 一 个 或 多 个 
class 名 称 ， 多 个 class 名 称 用 空格 分 隔 。 


options Object ”所 有 的 动画 设置 。 所 有 的 属性 是 可 选 的 。 


className String 


e duration (默认 值 : 400 ) 类 型 Number 或 String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e easing (默认 值 : swing ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 的 
easing IR. 

e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 


e children (默认 值 : false ) 类 型 : Boolean 描述 : 指定 动画 是 否 被 应 用 到 
匹配 元 素 的 所 有 后 代 。 此 功能 应 慎重 使 用 ， 因为 判断 元 素 是 否 是 动画 的 后 代 的 
代价 是 很 大 的 ， 会 根据 后 代 的 数量 线性 增长。 

e queue (默认 值 : true ) 类 型 : Boolean x String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动画 添加 到 由 字符 串 
表示 的 队列 中 。 


与 原生 的 CSS 过 渡 相 似 ，jQuery UI 的 class 动画 提供 了 一 个 平稳 的 从 一 个 状态 转 
换 到 另 一 个 状态 的 过 渡 ， 同 时 确保 所 有 样式 变化 的 细节 是 通过 CSS 来 完成 的 ， 而 
不 需要 使 用 JavaScript。 所 有 的 class 动画 方法 ， a .addClass() ， 人 允许 自 定 
义 动画 持续 时 间 和 easing 函数 ， 在 动画 完成 时 也 提供 了 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 进行 动画 添加 。 例 如 ， 对 背景 图 像 进行 动画 化 。 任 何不 能 
画 化 的 样式 都 将 在 动画 的 结尾 改变 。 


该 插件 扩展 自 jQuery AEM .addClass() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.addClass() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 
预期 的 行为 。 


实例 


添加 class "big-blue" 到 匹配 的 元 素 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.addClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
} 
.big-blue { 
width: 200px; 
height: 200px; 
background-color: #00f; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div></div> 


<script> 
$( "div" ).click(function() { 

$( this ).addClass( "big-blue", 1000, "easeOutBounce" ); 
3): 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 百叶 窗 特 效 (Blind Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 百叶 窗 特效 (Blind Effect) 通过 将 元 素 包 于 在 一 个 容器 内 ， 采 用 " 拉 百 叶 
窗 " 效 果 来 隐藏 或 显示 元 素 。 


blind 
参数 xd 描述 RA 


值 


隐藏 元 素 时 拉动 百叶 窗 的 方向 ， 显 示 元 素 时 拉动 


direction String 百叶 窗 的 方向 


可 能 的 值 : up, down, left, right, vertical, horizontal, | "up" | 


容器 应 用 overflow: hidden 时 ， 高 度 的 变化 会 影响 到 元 素 的 可 见 性 。 


实例 


使 用 百叶 窗 特 效 (Blind Effect) 切换 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 百 叶 窗 特效 (Blind Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "blind" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 反弹 特效 (Bounce Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 反弹 特效 (Bounce Effect) 反弹 一 个 元 素 。 当 与 隐藏 或 显示 一 起 使 用 时 ， 最 
后 一 次 或 第 一 次 反弹 会 呈现 淡 入 /淡出 效果 。 


bounce 

EX 
参数 类 型 描述 认 

值 
distance Number 最 大 的 反弹 距离 ， 以 像素 为 单位 。 20 
l 元 素 反 弹 的 次 数 。 当 隐藏 或 显示 时 ， 会 为 淡 入 / 淡 
times | Integer 出 效果 添加 半 个 反 涪 。 z 
实例 


使 用 反弹 特效 (Bounce Effect) 切换 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 反 弹 特效 (Bounce Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 
$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" ); 


3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 剪辑 特效 (Clip Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 剪辑 特效 (Clip Effect) 通过 垂直 或 水 平方 向 夹 剪 元 素来 隐藏 或 显示 一 个 元 


Zino 


clip 
参数 类 型 描述 默认 值 


direction String 剪辑 特效 隐藏 或 显示 元 素 的 方向 。 


vertical 剪辑 上 下 边缘 ，horizontal 剪辑 左右 边缘 。 | "vertical" | 


实例 


使 用 剪辑 特效 (Clip Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> #4} (Clip Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "clip" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 颜色 动画 (Color Animation) 


jQuery UI 特效 核心 添加 了 使 用 rgb() 、 rgba() 、 十 六 进 制 值 或 者 颜色 名 比 
如 "aqua" 来 动态 改变 color 属性 的 功能 。 只 需要 包含 jQuery Ul 特效 核心 文 
件 ， .animate() 就 会 支持 颜色 。 


支持 下 列 属性 : 


backgroundColor 
borderBottomColor 
borderLeftColor 
borderRightColor 
borderTopColor 
color 
columnRuleColor 
outlineColor 
textDecorationColor 
textEmphasisColor 


对 颜色 动画 的 支持 来 自 jQuery Color 插件 。Color 插件 提供 了 一 些 用 于 颜色 的 函 
数 。 如 需 查 看 完整 文档 ， 请 访问 jQuery Color 文档 。 


Class 动画 (Class Animations) 


虽然 可 以 直接 对 color 属性 进行 动画 化 ， 但 是 通常 采用 另 一 种 更 好 的 方法 ， 即 在 一 
个 class 中 包含 样式 。jQuery Ul 提供 了 一 些 动态 添加 或 去 除 CSS 类 的 方法 ， 分 别 
是 .addclass() . .removeClass() 、  .toggleClass() 和 

Eee lass (ue 这 些 方法 将 自动 确定 哪些 属性 需要 改变 ， 哪些 需要 应 用 适当 
的 动画 。 


实例 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 颜 色 动 画 (Color Animation) 演示 </title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.4/the 
<style> 
#elem { 
color: #006; 
background-color: #aaa; 
font-size: 25px; 
padding: 1em; 
text-align: center; 
} 
</style> 
«script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></sci 
</head> 
<body> 


«div id="elem"> 颜 色 动 画 </div> 
«button id="toggle"> 改 变 颜色 </button> 


<script> 
$( "#toggle" ).click(function() { 
$( "#elem" ).animate({ 
color: "green", 
backgroundColor: "rgb( 20, 20, 20 )" 
3); 
3); 


</script> 


</body> 
</html> 





jQuery UI API - 降落 特效 (Drop Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 降落 特效 (Drop Effect) 通过 单个 方向 滑动 的 淡 入 淡出 来 隐藏 或 显示 一 个 元 


71*0 


drop 
参数 类 型 描述 默认 


值 


隐藏 元 素 时 元 素 降落 的 方向 ， 显 示 元 素 时 元 素 出 
现 的 方向 。 


direction String 
可 能 的 值 : up. down, left, right, | "left" | 


实例 


使 用 降落 特效 (Blind Effect) 切换 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1e> 降 落 特效 (Drop Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "drop" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - Easings 


Easing BRE z/ BITE A RENTHIRE. jQuery 核心 带 有 两 个 easings : 一 个 
是 linear ， 整 个 动画 以 一 个 不 变 的 速度 行进 ; 另 一 个 是 swing (jQuery 核心 
默认 的 easing) ， 行 进 速度 在 动画 开始 和 结束 时 比 在 动画 中 间 时 稍 慢 。jQuery UI 
提供 了 一 些 额外 的 easing 函数 ， 范 围 从 摆动 行为 上 的 变化 到 定制 特效 ， 上 比如 弹 
Bko 


一 些 easings 会 在 动画 中 产生 负 值 。 根 据 动 画 的 不 同属 性 ， 实 际 值 可 能 为 需 。 例 
如 ， 您 可 以 把 left 取 为 负 值 ， 但 是 不 能 把 height 或 opacity 取 为 负 值 。 


想 要 更 好 地 理解 一 个 easing 如 何 影响 一 个 动画 ， 需 多 花 时 间 研 究 方程 图 。 请 看 下 
面 所 列 出 的 jQuery UI 中 所 有 可 用 动画 的 曲线 图 。 
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jQuery UI API - Easings 274 


jQuery UI API - .effect() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 (Methods) 
用 法 


描述 : 对 一 个 元 素 应 用 动画 特效 。 
返回 : jQuery 


.effect( effect [, options ] [, duration ] [, complete ] ) 


参数 类 型 描述 pu 

值 

effect String 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

options Object 特效 具体 的 设置 和 easing. 

se ND sb AA n Bess JS oz 
duration Number 或 as 八 数 字 ， 指 定 动画 将 运 400 
String 行 多 久 。 
complete Function() 一 有 旦 动画 完成 时 要 调用 的 函数 。 


.effect( options ) 


参数 类 型 描述 
options Object ”所 有 的 动画 设置 。 唯 一 一 个 必需 的 属性 是 effect, 


e effect 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

e easing (默认 值 : "swing" ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 
的 easing IR. 

e duration (默认 值 : 400 ) 类 型 Number zk String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

e queue (默认 值 true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动 画 添 加 到 由 字符 串 
表示 的 队列 中 。 


.effect() 方法 对 一 个 元 素 应 用 了 一 个 命名 的 动画 特效 。 许 多 特效 也 支持 显示 
或 隐藏 模式 ， 这 些 可 通过 .show() .hide() 和 .toggle() 方法 来 完成 。 


实例 
对 一 个 div 应 用 反弹 特效 (Bounce Effect) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.effect() 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
background: £ccc; 
border: 1px solid #000; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 


<body> 

<p> 点 击 任意 地 方 应 用 特效 。</p> 
<div></div> 

<script> 


$( document ).click(function() { 
$( "div" ).effect( "bounce", "slow" ); 


3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 爆炸 特效 (Explode Effect) 


所 属 类 别 
特效 (Effects) 
用 法 
描述 : 爆炸 特效 (Explode Effect) 通过 把 元 素 裂 成 碎片 来 隐藏 或 显示 一 个 元 素 。 
explode 
EAN 
参数 类 型 描述 认 
值 
爆炸 裂 开 的 碎片 数目 ， 应 该 是 个 平方 数 ， 任 何其 他 
ER 值 被 伟人 到 最 近 的 平方 数 。 


实例 


使 用 爆炸 特效 (Explode Effect) 切换 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1e> 爆 炸 特效 (Explode Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "explode" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 淡 人 淡出 特效 (Fade Effect) 


所 属 类 别 

特效 (Effects) 

用 法 

描述 : 淡 入 淡出 特效 (Fade Effect) 通过 淡 和 淡出 元 素来 隐藏 或 显示 一 个 元 素 。 


fade 


实例 


使 用 淡 入 淡出 特效 (Fade Effect) 切换 一 个 divo 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 淡 入 淡出 特效 (Fade Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "fade" ); 

3); 


«/script» 


«/body» 
«/html» 


E  ” OB 





jQuery UI API - #72 5X (Fold Effect) 
所 属 类 别 
特效 (Effects) 


用 法 


描述 : Tat (Fold Effect) 通过 折 党 元 素来 隐藏 或 显示 一 个 元 素 。 


fold 
参数 类 型 描述 
Number 
size 或 RIT A TRIIR T. 
String 


horizFirst Boolean ST A EA ARTA BT e. di 


得 ， 显 示 的 时 候 与 隐藏 的 时 候 顺 序 相反 。 


实例 


使 用 折 和 壹 特效 (Fold Effect) 切换 一 个 div。 


默认 


false 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> (Fold Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "fold" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .hide() 


所 属 类 别 


特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) | A 
法 (Methods) 


用 法 


描述 : 使 用 自 定 义 效果 来 隐藏 匹配 的 元 素 。 


返回 : jQuery 


.hide( effect [, options ] [, duration ] [, complete ] ) 


参数 类 型 描述 SA 
值 
effect String 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 
options Object 特效 具体 的 设置 和 easing. 
BY 一 个 字 x 或 一 个 类 = = Wisk: 将 in 
duration Number 或 一 个 字符 串 或 人 数字， 指定 动画 将 运 400 
String 行 多 久 。 
complete Function() 一 旦 动画 完成 时 要 调用 的 函数 。 


.hide( options ) 


参数 类 型 描述 


options Object ”所 有 的 动画 设置 。 唯 一 一 个 必需 的 属性 是 effect。 


effect 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

easing (默认 值 : "swing" ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 
的 easing ERX. 

duration (默认 值 : 400 ) 类 型 Number zx String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

queue (默认 值 : true ) 类 型 Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 #2, queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动 画 添 加 到 由 字符 串 


表示 的 队列 中 。 


该 插件 扩展 自 jQuery NBA .hide() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.hide() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 期 
的 行为 。 


实例 
使 用 降落 特效 (Drop Effect) 隐藏 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.hide() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div d 
width: 100px; 
height: 100px; 
background: £Zccc; 
border: 1px solid #000; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button> 隐 藏 div</button> 
<div></div> 


<script> 
$( "button" ).click(function() { 
$( "div" ).hide( "drop", { direction: "down" }, "slow" ); 


3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 突出 特效 (Highlight Effect) 


所 属 类 别 
特效 (Effects) 
用 法 


描述 : 突出 特效 (Highlight Effect) 通过 首先 改变 背景 产 色 来 隐藏 或 显示 一 个 元 


71*0 


highlight 
参数 类 型 描述 默认 值 
color String 动画 期 间 使 用 的 背景 颜色 。 "#ffff99" 
实例 
头 


使 用 突出 特效 (Highlight Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 突 出 特效 (Highlight Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "highlight" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API -膨胀 特效 (Puff Effect) 


默认 值 
150 


所 属 类 别 
特效 (Effects) 
用 法 
描述 : 通过 在 缩放 元 素 的 同时 隐藏 元 素来 创建 膨胀 特效 (Puff Effect) 。 
puff 
参数 类 型 描述 
percent Number 要 缩放 到 的 百分比 。 
实例 


使 用 膨胀 特效 (Puff Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1le> 膨 胀 特效 (Puff Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "#toggle" ).toggle( "puff" ); 

3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 跳动 特效 (Pulsate Effect) 


所 属 类 别 

特效 (Effects) 

用 法 

描述 : 跳动 特效 (Pulsate Effect) 通过 跳动 来 隐藏 或 显示 一 个 元 素 。 


pulsate 


参数 类 型 描述 


times | Integer 元 素 跳动 的 次 数 。 当 隐藏 或 显示 时 ， 会 添加 半 个 跳 
动 。 


实例 


使 用 跳动 特效 (Pulsate Effect) 切换 一 个 div。 


默认 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 跳 动 特 效 (Pulsate Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "pulsate" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .removeClass() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 坊 (Method Overrides) 
用 法 


描述 : 当 动 画 样式 改变 时 ， 为 匹配 的 元 素 集合 内 的 每 个 元 素 移 除 指定 的 Class. 
返回 : jQuery 


.removeClass( className [, duration ] [, easing ] [, complete ] ) 


mi = ma uj 


we ae 里 M. 
参数 类 型 描述 默认 
值 
要 从 每 个 匹配 的 元 素 的 class 属性 中 移 除 
className String 的 一 个 或 多 个 class 名 称 ， 多 个 class 名 
称 用 空格 分 隔 。 
Number 一 个 字符 串 或 一 个 数字 ， 指 定 动画 将 运行 
duration 或 String 多 久 。 400 
一 个 字 b- S | > 
easing String 字符 串 ， 指 示 要 使 用 的 easing E Sis 


complete Function) — E z/i&ise px ed 2 38 FH BER ZA, 


.removeClass( className [, options ] ) 


参数 类 型 描述 


要 从 每 个 匹配 的 元 素 的 class 属性 中 移 除 的 一 个 或 多 个 
class 名 称 ， 多 个 class 名 称 用 空格 分 隔 。 


options Object ”所 有 的 动画 设置 。 所 有 的 属性 是 可 选 的 。 


className String 


e duration (默认 值 400 ) 类 型 : Number x String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e easing (默认 值 : swing ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 的 
easing IZ. 


e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

e children (默认 值 : false ) 类 型 : Boolean 描述 : 指定 动画 是 否 被 应 用 到 
匹配 元 素 的 所 有 后 代 。 此 功能 应 慎重 使 用 ， 因 为 判断 元 素 是 否 是 动画 的 后 代 的 
代价 是 很 大 的 ， 会 根据 后 代 的 数量 线性 增长。 

queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 

1.7 ij, queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动画 添加 到 由 字符 串 
表示 的 队列 中 。 


与 原生 的 CSS 过 渡 相 似 ，jQuery UI class 动画 提供 了 一 个 平稳 的 从 一 个 状态 转 
换 到 另 一 个 状态 的 过 渡 ， 同 时 确保 所 有 样式 变化 的 细节 是 通过 CSS 来 完成 的 ， 而 
不 需要 使 用 JavaScript。 所 有 的 class 动画 方法 ， 包 括 es a , iF 
自 定义 动画 持续 时 间 和 casing 函数 ， 在 动画 完成 时 也 提供 了 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 进行 动画 添加 。 例 如 ， 对 背景 图 像 进行 动画 化 。 任 何不 能 
男 化 的 样式 都 将 在 动画 的 结尾 改变 。 


该 插件 扩展 了 jQuery 内 和 置 的 .removeClass() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.removeClass() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 
生 预 期 的 行为 。 


实例 


从 匹配 的 元 素 中 移 除 class "big-blue" 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.removeClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
} 
.big-blue { 
width: 200px; 
height: 200px; 
background-color: #00f; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div class="big-blue"></div> 


<script> 
$( "div" ).click(function() { 

$( this ).removeClass( "big-blue", 1000, "easeInBack" ); 
3): 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 缩放 特效 (Scale Effect) 


所 属 类 别 

特效 (Effects) 

用 法 

描述 : 按照 某 个 百分比 缩放 元 素 。 


scale 
参数 类 型 描述 默认 值 


特效 的 方向 。 可 能 的 值 : "both", "vertical" 


direction — String 或 "horizontal" "both" 
[ . 
origin Array 消失 点 。 eee: i 
center 


] 


percent Number ”要 缩放 到 的 百分比 。 
元 素 的 哪个 区 域 将 被 调整 尺 
寸 : "both"、"box"、"content"。 当 值 为 
scale String "box" 时 ， 调 整 元 素 的 边框 (border) 和 内 "both" 
边 距 (padding) 的 尺寸 。 当 值 为 "content" 
时 ， 调 整 元 素 内 的 所 有 内 容 的 尺寸 。 


实例 


实例 1 : 
使 用 缩放 特效 (Scale Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 缩 放 特 效 (Scale Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "scale" ); 
3); 


«/script» 


«/body» 
«/html» 


4] sé 
实例 2 : 
只 在 一 个 方向 上 使 用 缩放 特效 (Scale Effect) 切换 一 个 div。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>> 缩 放 特 效 (Scale Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 
$( "#toggle" ).toggle({ effect: "scale", direction: "horizontal" 


3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 晨 动 特效 (Shake Effect) 
所 属 类 别 

特效 (Effects) 

用 法 

描述 : 垂直 或 水 平方 向 多 次 震动 元 素 。 


Shake 


参数 类 型 描 


学 


"left" 或 "right" 的 值 将 水 平 震动 元 素 ，"up" 或 
direction — String "down" 的 值 将 垂直 震动 元 素 。 该 值 指定 元 素 治 
轴线 移动 时 第 一 步 的 方向 。 
distance ”Number ”要 震动 的 距离 。 


times Integer ”要 震动 的 次 数 。 


实例 


震动 一 个 div。 


默认 
值 


"left" 


20 
3 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 震 动 特 效 (Shake Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 震动 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).effect( "shake" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .show() 


所 属 类 别 


特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) | A 
法 (Methods) 


用 法 


描述 : 使 用 自 定 义 效果 来 显示 匹配 的 元 素 。 


返回 : jQuery 


.show( effect [, options ] [, duration ] [, complete ] ) 


" <i E 
参数 类 型 描述 SA 
值 

effect String 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 
options Object 特效 具体 的 设置 和 easing. 

st — AN EE st — A #6 SS 忆 JS a5 
duration Number 或 一 个 字符 串 或 人 数字， 指定 动画 将 运 400 

String 行 多 久 。 

complete Function() 一 旦 动画 完成 时 要 调用 的 函数 。 


,Show( options ) 


参数 类 型 描述 


options Object ”所 有 的 动画 设置 。 唯 一 一 个 必需 的 属性 是 effect。 


effect 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

easing (默认 值 : "swing" ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 
的 easing ERX. 

duration (默认 值 : 400 ) 类 型 Number zx String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

queue (默认 值 : true ) 类 型 Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动 画 添 加 到 由 字符 串 


表示 的 队列 中 。 


该 插件 扩展 自 jQuery NBN show() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.Show() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 期 
的 行为 。 


实例 
使 用 折 和 壹 特效 (Fold Effect) 显示 一 个 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.show() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
display: none; 
width: 100px; 
height: 100px; 
background: #ccc; 
border: 1px solid #000; 


} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button> 显 示 div</button> 
<div></div> 


<script> 

$( "button" ).click(function() f 
$( "div" ).show( "fold", 1000 ); 

3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 尺寸 特效 (Size Effect) 


所 属 类 别 


特效 (Effects) 


用 法 
描述 : 


size 


origin 


scale 


实例 


EAR 


调整 元 素 尺 寸 到 指定 宽度 和 高 度 。 


学 


类 型 fü 


Object ”要 调整 到 的 高 度 和 宽度 。 
Array ”消失 点 。 


JU SR AY ARTS KB AR ER 

寸 : "both", "box", "content", 4444 "box" Hj, 
String ， 调整 元 素 的 边框 (border) 和 内 边 距 (padding) 

的 尺寸 。 当 值 为 "content" 时 ， 调 整 元 素 内 的 所 有 

内 容 的 尺寸 。 


寸 特 效 (Size Effect) 调整 元 素 尺 寸 。 


默认 
值 


[ 
"top" : 
"left" ] 


"both" 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 尺 寸 特效 (Size Effect) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进 行 尺寸 调整 。 </p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 
$( "#toggle" ).effect( "size", { 
to: { width: 200, height: 60 } 
jJ, 1000 ); 
3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 滑动 特效 (Slide Effect) 
所 属 类 别 

特效 (Effects) 

用 法 


描述 : 把 元 素 滑动 出 视 区 。 


slide 
参数 类 型 描述 


特效 的 方向 。 可 能 的 
值 : "left", "right", "up", "down". 


特效 的 距离 。 默 认为 元 素 的 高 度 
(height) 还 是 宽度 (width) 取决 于 

distance Number direction 参数 。 可 以 设置 为 小 于 元 素 的 宽 
度 (width) /高 度 (height) 的 任意 整 


o 


direction String 


实例 


使 用 滑动 特效 (Slide Effect) 切换 一 个 div。 


默认 值 


"both" 


元 素 的 
outerWidth 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 滑 动 特 效 (Slide Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任意 地 方 进行 切换 。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "slide" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .switchClass() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 坊 (Method Overrides) 
用 法 


描述 : 当 动 画 样式 改变 时 ， 为 匹配 的 元 素 集合 内 的 每 个 元 素 添加 和 移 除 指定 的 
Class。 


返回 : jQuery 


.SwitchClass( removeClassName, addClassName [, duration ] [, easint 





参数 类 型 描述 p 
要 从 每 个 匹配 的 元 素 的 class 属 
性 中 移 除 的 一 个 或 多 个 class 名 
称 ， 多 个 class 名 称 用 空格 分 隔 


o 


要 添加 到 每 个 匹配 的 元 素 的 class 
属性 中 的 一 个 或 多 个 class 名 


removeClassName String 


addClassName String 称 ， 多 个 class 名 称 用 空格 分 
UN 
Number 一 个 字符 串 或 一 个 数字 ， 指 定 动 
at String 画 将 运行 多 久 。 a 
ONE 已 一 
easing String a 指示 要 使 用 的 swing 
complete Function) ， 一 且 动 画 完 成 时 要 调用 的 函数 。 


.switchClass( removeClassName, addClassName [, options ] ) 


参数 类 型 描述 


要 从 每 个 匹配 的 元 素 的 class 属性 中 移 除 的 一 
removeClassName String ”个 或 多 个 class 名 称 ， 多 个 class 名 称 用 空格 


分 隔 。 
要 添加 到 每 个 匹配 的 元 素 的 class 属性 中 的 一 
addClassName String 个 或 多 个 class 名 称 ， 多 个 class 名 称 用 空格 
分 隔 。 
options Object ”所 有 的 动画 设置 。 所 有 的 属性 是 可 选 的 。 


e duration (默认 值 400 ) 类 型 Number 或 String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e easing (默认 值 : swing ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 的 
easing HA. 

e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

children (默认 值 : false ) 类 型 : Boolean 描述 : 指定 动画 是 否 被 应 用 到 

匹配 元 素 的 所 有 后 代 。 此 功能 应 慎重 使 用 ， 因 为 判断 元 素 是 否 是 动画 的 后 代 的 

代价 是 很 大 的 ， 会 根据 后 代 的 数量 线性 增长 。 

queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 

示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 

1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动画 添加 到 由 字符 串 

表示 的 队列 中 。 


.switchClass() 方法 允许 您 在 动画 过 渡 中 ， 添 加 Class 的 同时 移 除 Class, 


与 原生 的 CSS 过 渡 相 似 ，jQuery UI class 动画 提供 了 一 个 平稳 的 从 一 个 状态 转 
换 到 另 一 个 状态 的 过 渡 ， 同 时 确保 所 有 样式 变化 的 细节 是 通过 CSS 来 完成 的 ， 而 
不 需要 使 用 JavaScript。 所 有 的 class 动画 方法 ， 包 括 fupe , JU 
自 定义 动画 持续 时 间 和 casing HRM, Fase hte T — 1 [173. 


并 非 所 有 的 样式 都 可 以 进行 动画 添加 。 例 如 ， 对 背景 图 像 进行 动画 化 。 任 何不 能 
画 化 的 样式 都 将 在 动画 结束 时 改变 。 


该 插件 扩展 自 jQuery 内 置 的 .switchClass() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.switchClass() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 
生 预 期 的 行为 。 


实例 


添加 class "blue" 到 匹配 的 元 素 ， 并 从 匹配 的 元 素 中 移 除 class "big". 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 
<title>.switchClass() 演示 </title> 


<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 


<style> 

div { 
width: 100px; 
height: 100px; 


j 
.big { 
width: 200px; 
height: 200px; 
} 
.blue { 


} 
</style> 


background-color: #ccc; 


background-color: #00f; 


«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


</head> 
<body> 


<div class="big"></div> 


<script> 


$( "div" ).click(function() { 
$( this ).switchClass( "big", 


3): 


«/script» 


«/body» 
«/html» 
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jQuery UI API - .toggle() 


所 属 类 别 


特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 载 (Method Overrides) | A 
法 (Methods) 


用 法 


描述 : 使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 素 。 
返回 : jQuery 


.toggle( effect [, options ] [, duration ] [, complete ] ) 


参数 类 型 描述 SA 
值 
effect String 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 
options Object 特效 具体 的 设置 和 easing. 
BY 一 个 字 x 或 一 个 类 = = Wisk: 将 in 
duration Number 或 一 个 字符 串 或 人 数字， 指定 动画 将 运 400 
String 行 多 久 。 
complete Function() 一 有 旦 动画 完成 时 要 调用 的 函数 。 


.toggle( options ) 


参数 类 型 描述 


options Object ”所 有 的 动画 设置 。 唯 一 一 个 必需 的 属性 是 effect。 


e effect 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 哪 一 种 特效 。 

e easing (默认 值 : "swing" ) 类 型 String 描述 : 一 个 字符 串 ， 指 示 要 使 用 
的 easing ERX. 

e duration (默认 值 : 400 ) 类 型 Number 或 String 描述 : 一 个 字符 串 或 一 
个 数字 ， 指 定 动画 将 运行 多 久 。 

e complete 类 型 : Function() 描述 : 一 旦 动画 完成 时 要 调用 的 函数 。 

e queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 起 ，queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动 画 添 加 到 由 字符 串 


表示 的 队列 中 。 


该 插件 扩展 自 jQuery AEH .toggle() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.toggle() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 
期 的 行为 。 


实例 
使 用 折 释 特效 (Fold Effect) 切换 一 个 div. 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.toggle() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div d 
width: 100px; 
height: 100px; 
background: £Zccc; 
border: 1px solid #000; 
} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button>Wie div</button> 
<div></div> 


<script> 
$( "button" ).click(function() { 

$( "div" ).toggle( "fold", 1000 ); 
3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - .toggleClass() 


所 属 类 别 
特效 (Effects) | 特效 核心 (Effects Core) | 方法 重 坊 (Method Overrides) 
用 法 


描述 : 当 动 画 样 式 改变 时 ， 根 据 Class 是 否 存在 以 及 switch 参数 的 值 ， 为 匹配 的 元 
素 集 合 内 的 每 个 元 素 添加 或 移 除 一 个 或 多 个 Class。 


返回 : jQuery 


.toggleClass( className [, switch ] [, duration ] [, easing ] [, cc 





" T gr; 
参数 类 型 His 默认 
值 
为 匹配 的 元 素 集 合 中 的 每 个 元 素 要 切换 的 
ClassName String 一 个 或 多 个 class 名 称 ， 多 个 class 名 称 
用 空格 分 隔 。 
= bra - hb uni 
switch Boolean Ue 指定 class 应 被 添加 还 是 被 
. Number 一 个 字符 串 或 一 个 数字 ， 指 定 动画 将 运行 
duration 或 String 多 久 。 400 
一 个 字 ore d j K] 
easing String 5 字符 串 ， 指 示 要 使 用 的 easing EX suus 


complete Function) — E z/i&ise px ed 2 38 FH BER ZA, 


.toggleClass( className [, switch ] [, options ] ) 


ClassName String 


参数 关 型 描述 


为 匹配 的 元 素 集 合 中 的 每 个 元 素 要 切换 的 一 个 或 多 个 
class 名 称 ， 多 个 class 名 称 用 空格 分 隔 。 


switch Boolean ， 一 个 布尔 值 ， 指 定 class 应 被 添加 还 是 被 移 除 。 
options Object 所 有 的 动画 设置 。 所 有 的 属性 是 可 选 的 。 
e duration (默认 值 : 400 ) 类 型 Number 或 String 描述 : 一 个 字符 串 或 一 


个 数字 ， 指 定 动画 将 运行 多 久 。 
easing (默认 值 : swing ) 类 型 : String 描述 : 一 个 字符 串 ， 指 示 要 使 用 的 
easing HR. 


e complete 类 型 : Function() 描述 : — E z/ji&ise px sd BRAY, 


children (默认 值 : false ) 类 型 : Boolean 描述 : 指定 动画 是 否 被 应 用 到 
匹配 元 素 的 所 有 后 代 。 此 功能 应 慎重 使 用 ， 因 为 判断 元 素 是 否 是 动画 的 后 代 的 
代价 是 很 大 的 ， 会 根据 后 代 的 数量 线性 增长 。 

queue (默认 值 : true ) 类 型 : Boolean 或 String 描述 : 一 个 布尔 值 ， 指 
示 是 否 将 动画 放 在 特效 队列 中 。 如 果 是 false， 动 画 将 立即 开始 。 自 jQuery 
1.7 #2, queue 选项 也 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 动画 添加 到 由 字符 串 
表示 的 队列 中 。 


与 原生 的 CSS 过 渡 相 似 ，jQuery UI 的 class 动画 提供 了 一 个 平稳 的 从 一 个 状态 转 
换 到 另 一 个 状态 的 过 渡 ， 同 时 确保 所 有 样式 变化 的 细节 是 通过 CSS 来 完成 的 ， 而 
不 需要 使 用 JavaScript。 所 有 的 class 动画 方法 ， 包 括 ea , seit 
自 定义 动画 持续 时 间 和 easing WA, Ha sem hee T — T [80 73. 


并 非 所 有 的 样式 都 可 以 进行 动画 添加 。 例 如 ， 对 背景 图 像 进行 动画 化 。 任 何不 能 
画 化 的 样式 都 将 在 动画 结束 时 改变 。 


该 插件 扩展 自 jQuery AEH .toggleClass() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.toggleClass() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 
生 预 期 的 行为 。 


实例 


为 匹配 的 元 素 切 换 class "big-blue"。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.toggleClass() 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
} 
.big-blue { 
width: 200px; 
height: 200px; 
background-color: #00f; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div></div> 


<script> 
$( "div" ).click(function() { 

$( this ).toggleClass( "big-blue", 1000, "easeOutSine" ); 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 转移 特效 (Transfer Effect) 
所 属 类 别 

特效 (Effects) 

用 法 


描述 : 把 一 个 元 素 的 轮廓 转移 到 另 一 个 元 素 。 


transfer 

参数 类 型 描述 
className String 转移 的 元 素 将 接收 的 参数 化 的 class 名 称 。 
to String jQuery 选择 器 ， 要 转移 到 的 元 素 。 


当 尝 试 两 个 元 素 之 间 的 可 视 化 交互 时 非常 有 用 。 


转移 的 元 素 本 身 带 有 class ui-effects-transfer ， 其 他 的 样式 需要 由 您 来 定 
义 ， 上 比如 添加 背景 或 边框 。 


实例 


在 绿色 元 素 上 点 击 把 它 转移 到 另 一 个 元 素 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 转 移 特 效 (Transfer Effect) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div.green { 
width: 100px; 
height: 80px; 
background: green; 
border: 1px solid black; 
position: relative; 
J 
div.red { 
margin-top: 10px; 
width: 50px; 
height: 30px; 
background: red; 
border: 1px solid black; 
position: relative; 
J 
.ui-effects-transfer ( 
border: 1px dotted black; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div class="green"></div> 
<div class="red"></div> 


<script> 
$( "div" ).click(function() { 

var i = 1 - $( "div" ).index( this ); 

$( this ).effect( "transfer", ( to: $( "div" ).eq( i ) }, 1000 ), 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API 类别 


API 


.addClass() 


颜色 动画 


(Color 


Animation) 


.effect() 


hide() 


.removeClass() 


.Show() 


.SwitchClass() 


.toggle() 


.toggleClass() 


Br 
EH 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 
合 内 的 每 个 元 素 添 加 指定 的 Class。 


使 用 .animate() 实现 颜色 动画 效果 。 


对 一 个 元 素 应 用 动画 特效 。 


使 用 自 定义 效果 来 隐藏 匹配 的 元 素 。 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 
合 内 的 每 个 元 素 移 除 指 定 的 Class。 


使 用 自 定 义 效果 来 显示 匹配 的 元 素 。 


当 动 画 样 式 改 变 时 ， 
合 内 的 每 个 元 素 添 加 和 移 除 指定 


Class。 


使 用 自 定 义 效 果 来 显示 或 隐藏 匹配 的 


元 素 。 


当 动 画 样 式 改变 时 ， 根 据 Class 是 否 
存在 以 及 switch 参数 的 值 ， 为 匹配 的 
元 素 集合 内 的 每 个 元 素 添 加 或 移 除 一 


个 或 多 个 Class。 


- 特效 核心 (Effects Core) 


由 jquery.ui.effect.js 提供 的 功能 。 除 了 下 面 列 出 的 方法 ，jquery.ui.effect.js 还 
一 些 Easings。 


下 包括 


也 属于 类 别 


特效 (Effects) | 
方法 重 载 (Method 


Overrides) 


特效 (Effects) | 
方法 (Method) 


特效 (Effects) | 
方法 重 载 (Method 
Overrides) | 方法 
(Method) 


特效 (Effects) | 
方法 重 载 (Method 


Overrides) 


特效 (Effects) | 

AKER (Method 
Overrides) | 方法 
(Method) 


特效 (Effects) 


特效 (Effects) | 

方法 重 载 (Method 
Overrides) | 方法 
(Method) 


特效 (Effects) | 
方法 重 载 (Method 


Overrides) 


jQuery UI API - 颜色 动画 (Color Animation) 


jQuery UI 特效 核心 添加 了 使 用 rgb() 、 rgba() 、 十 六 进 制 值 或 者 颜色 名 比 
如 "aqua" 来 动态 改变 color 属性 的 功能 。 只 需要 包含 jQuery Ul 特效 核心 文 
件 ， .animate() 就 会 支持 颜色 。 


支持 下 列 属性 : 


backgroundColor 
borderBottomColor 
borderLeftColor 
borderRightColor 
borderTopColor 
color 
columnRuleColor 
outlineColor 
textDecorationColor 
textEmphasisColor 


对 颜色 动画 的 支持 来 自 jQuery Color 插件 。Color 插件 提供 了 一 些 用 于 颜色 的 函 
数 。 如 需 查 看 完整 文档 ， 请 访问 jQuery Color 文档 。 


Class 动画 (Class Animations) 


虽然 可 以 直接 对 color 属性 进行 动画 化 ， 但 是 通常 采用 另 一 种 更 好 的 方法 ， 即 在 一 
个 class 中 包含 样式 。jQuery Ul 提供 了 一 些 动态 添加 或 去 除 CSS 类 的 方法 ， 分 别 
是 .addclass() . .removeClass() 、  .toggleClass() 和 

Eee lass (ue 这 些 方法 将 自动 确定 哪些 属性 需要 改变 ， 哪些 需要 应 用 适当 
的 动画 。 


实例 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 颜 色 动 画 (Color Animation) 演示 </title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.4/the 
<style> 
#elem { 
color: #006; 
background-color: #aaa; 
font-size: 25px; 
padding: 1em; 
text-align: center; 
} 
</style> 
«script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></sci 
</head> 
<body> 


«div id="elem"> 颜 色 动 画 </div> 
«button id="toggle"> 改 变 颜色 </button> 


<script> 
$( "#toggle" ).click(function() { 
$( "#elem" ).animate({ 
color: "green", 
backgroundColor: "rgb( 20, 20, 20 )" 
3); 
3); 


</script> 


</body> 
</html> 
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jQuery UI API 类 别 - 交互 (Interactions) 


jQuery Ul 提供 了 一 套 基 于 鼠标 的 交互 。 


API 描述 也 属于 类 别 
立 
nom (Draggable 允许 使 用 鼠标 移动 元 素 。 
可 放置 小 部 件 (Droppable , 
Widget) 为 可 拖 搜 小 部 件 创建 目标 。 
鼠标 交互 (Mouse — 实用 工具 
Interaction) 基本 交互 层 。 (Utilities) 
可 调整 尺寸 小 部 件 Ea 1- Mr ae 一 HA 
(Resizable Widget) 48 FH Bg AUF CRN RT. 
可 选择 小 部 件 (Selectable  ， 使 用 鼠标 选择 单个 元 素 或 一 组 
Widget) 元 素 。 


可 排序 小 部 件 (Sortable 使 用 鼠标 调整 列表 中 或 者 网 格 
Widget) 中 元 素 的 排序 。 


a 


i C) arv lll N Lh ( ntarartinne ) 
jNuery U Ls teractions , 


jQuery UI API - 可 拖 搜 小 部 件 (Draggable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 允许 使 用 鼠标 移动 元 素 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : 让 被 选 元 素 可 被 鼠标 拖 搜 。 如 果 您 不 只 是 拖 搜 ， 而 是 拖 搜 & 放置 ， 请 查看 
jQuery UI 可 放置 (Droppable) 插件 ， 为 可 拖 搜 元 素 提供 了 一 个 放置 目标 。 


快速 导航 


addClassesappendToaxiscancelconnectToSortablecontainmentcursorcursorAtde 


addClasses 
类 型 : Boolean 


描述 : 如 果 设 置 为 false ， 将 阻止 ui-draggable class 被 添加 。 当 在 数 百 个 
元 素 上 调用 .draggable() 时 ， 这 人 么 设置 有 利于 性 能 优化 。 


代码 实例 : 
初始 化 带 有 指定 addClasses 选项 的 draggable : 


$( ".selector" ).draggable({ addClasses: false }); 


在 初始 化 后 ， 获 取 或 设置 addClasses 选项 : 


// getter 
var addClasses = $( ".selector" ).draggable( "option", "addClasses' 


// setter 
$( ".selector" ).draggable( "option", "addClasses", false ); 








q 





默认 值 : true 


appendTo 

类 型 : jQuery 或 Element 或 Selector 或 String 

描述 : 当 拖 搜 时 ，draggable BUF (helper) 要 追加 到 哪 一 个 元 素 。 
支持 多 个 类 型 : 


jQuery : 一 个 jQuery 对 象 ， 包 含 助手 (helper) 要 追加 到 的 元 素 。 
Element : 要 追加 助手 (helper) 的 元 素 。 

Selector : 一 个 选择 器 ， 指 定 哪 一 个 元 素 要 追加 助手 (helper) 。 

String: FE "parent" 将 促使 助手 (helper) 成 为 draggable 的 同 级 。 
代码 实例 : 


初始 化 带 有 指定 appendTo 选项 的 draggable : 


$( ".selector" ).draggable({ appendTo: "body" }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 


// getter 
var appendTo = $( ".selector" ).draggable( "option", "appendTo" ); 


// setter 
$( ".selector" ).draggable( "option", "appendTo", "body" ); 


二 Bl 


默认 值 : "parent" 


axis 

类 型 : String 

描述 : 约束 在 水 平 轴 (x) 或 垂直 轴 (y) 上 拖 搜 。 可 能 的 值 : "x" ，"y" 。 
代码 实例 : 


初始 化 带 有 指定 axis 选项 的 draggable : 


$( ".selector" ).draggable({ axis: "x" }); 


在 初始 化 后 ， 获 取 或 设置 axis 选项 : 


// getter 
var axis = $( ".selector" ).draggable( "option", "axis" ); 


// setter 


$( ".selector" ).draggable( "option", "axis", "x" ); 


默认 值 : false 


cancel 

类 型 : Selector 

描述 : 防止 从 指定 的 元 素 上 开始 拖 搜 。 

代码 实例 : 

初始 化 带 有 指定 cancel 选项 的 draggable : 


$( ".selector" ).draggable({ cancel: ".title" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 
// getter 


var cancel = $( ".selector" ).draggable( "option", "cancel" ); 


// setter 
$( ".selector" ).draggable( "option", "cancel", ".title" ); 


默认 值 : "input, textarea, button, select, option" 


connectToSortable 
类 型 : Selector 


描述 : 允许 draggable 放置 在 指定 的 sortable 上 。 如 果 使 用 了 该 选项 ， 一 个 
draggable 可 被 放置 在 一 个 sortable 列表 上 ， 然 后 成 为 列表 的 一 部 分 。 注 

意 : helper 选项 必须 设置 为 "clone" ， 以 便 更 好 地 工作 。 必 须 包 含 可 排序 小 
部 件 (Sortable Widget) 。 


代码 实例 : 


初始 化 带 有 指定 connectToSortable 选项 的 draggable : 


$( ".selector" ).draggable({ connectToSortable: "#my-sortable" }); 


‘| = zee | 


在 初始 化 后 ， 获 取 或 设置 connectToSortable 选项 : 








// getter 
var connectToSortable = $( ".selector" ).draggable( "option", "conr 


// setter 
$( ".selector" ).draggable( "option", "connectToSortable", "#my-sot 
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默认 值 : false 





containment 


X 8! : Selector 或 Element 或 String 或 Array 
描述 : 约束 在 指定 元 素 或 区 域 的 边界 内 拖 搜 。 
支持 多 个 类 型 : 
。 Selector : 可 拖 搜 元 素 将 被 包含 在 selector 第 一 个 元 素 的 边界 内 。 如 果 未 找到 


元 素 ， 则 不 设置 containment, 
e Element : 可 拖 搜 元 素 将 被 韩寒 在 元 素 的 边界 。 
e String : 可 能 的 值 : "parent" 、 "document" , "window" 。 
e Array : 一 个 数组 ， 以 形式 [ x1，y1，x2，y2 ] 定义 元 素 的 边界 。 


代码 实例 : 


初始 化 带 有 指定 containment 选项 的 draggable : 


$( ".selector" ).draggable({ containment: "parent" }); 


在 初始 化 后 ， 获 取 或 设置 containment 选项 : 


// getter 
var containment = $( ".selector" ).draggable( "option", "containmer 


// setter 
$( ".selector" ).draggable( "option", "containment", "parent" ); 
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默认 值 : false 


cursor 

类 型 : String 

描述 : 拖 搜 操作 期 间 的 CSS 光标 。 
代码 实例 : 


初始 化 带 有 指定 cursor 选项 的 draggable : 


$( ".selector" ).draggable({ cursor: "crosshair" }); 


在 初始 化 后 ， 获 取 或 设置 cursor 选项 : 


// getter 
var cursor = $( ".selector" ).draggable( "option", "cursor" ); 


// setter 
$( ".selector" ).draggable( "option", "cursor", "crosshair" ); 


默认 值 : "auto" 


cursorAt 
类 型 : Object 


描述 : 设置 拖 搜 助 手 (helper) 相对 于 鼠标 光标 的 偏 移 。 坐 标 可 通过 一 个 或 两 个 键 
的 组 合成 一 个 哈 希 给 出 : { top, left, right, bottom } o 


代码 实例 : 


初始 化 带 有 指定 cursorAt 选项 的 draggable : 


$( ".selector" ).draggable({ cursorAt: { left: 5 } }); 


在 初始 化 后 ， 获 取 或 设置 cursorAt 选项 : 


// getter 
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" ); 


// setter 
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } ); 
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默认 值 : false 


delay 
类 型 : Number 


描述 : 鼠标 按 下 后 直到 抑 搜 开始 为 止 的 时 间 ， 以 毫秒 计 。 该 选项 可 以 防止 点 击 在 有 某 
个 元 素 上 时 不 必要 的 拖 搜 。 


代码 实例 : 
初始 化 带 有 指定 delay 选项 的 draggable : 


$( ".selector" ).draggable({ delay: 300 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).draggable( "option", "delay" ); 


// setter 
$( ".selector" ).draggable( "option", "delay", 300 ); 


默认 值 : 0 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 draggable. 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 draggable : 


$( ".selector" ).draggable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).draggable( "option", "disabled" ); 


// setter 
$( ".selector" ).draggable( "option", "disabled", true ); 
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默认 值 : false 


distance 
类 型 : Number 


描述 : 鼠标 按 下 后 拖 搜 开 始 前 必须 移动 的 距离 ， 以 像素 计 。 该 选项 可 以 防止 点 击 在 
某 个 元 素 上 时 不 必要 的 拖 搜 。 


代码 实例 : 


初始 化 带 有 指定 distance 选项 的 draggable : 


$( ".selector" ).draggable({ distance: 10 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).draggable( "option", "distance" ); 


// setter 
$( ".selector" ).draggable( "option", "distance", 10 ); 


b Bi] 
默认 值 : 1 

grid 

类 型 : Array 


描述 : 对 齐 拖 搜 助手 (helper) 到 网 格 ， 每 个 x 和 y 像素 。 数 组 形式 必须 是 
[xy]。 


代码 实例 : 
初始 化 带 有 指定 grid 选项 的 draggable : 


$( ".selector" ).draggable({ grid: [ 50, 20 ] }); 


在 初始 化 后 ， 获 取 或 设置 grid 选项 : 


// getter 
var grid = $( ".selector" ).draggable( "option", "grid" ); 


// setter 
$( ".selector" ).draggable( "option", "grid", [ 50, 20 ] ); 


默认 值 : false 


handle 


类 型 : Selector 或 Element 


描述 : 如 果 指 定 了 该 选项 ， 则 限制 开始 拖 搜 ， 除 非 鼠 标 在 指定 的 元 素 上 按 下 。 只 有 
可 拖 搜 (draggable) 元 素 的 后 代 元 素 才 人 允许 被 拖 搜 。 


代码 实例 : 
初始 化 带 有 指定 handle 选项 的 draggable : 


$( ".selector" ).draggable({ handle: "h2" }); 


在 初始 化 后 ， 获 取 或 设置 handle 选项 : 


// getter 
var handle = $( ".selector" ).draggable( "option", "handle" ); 


// setter 
$( ".selector" ).draggable( "option", "handle", "h2" ); 


默认 值 : false 


helper 

类 型 : String 或 Function() 

描述 : 允许 一 个 helper 元 素 用 于 拖 搜 显示 。 
支持 多 个 类 型 : 


e String : 如 果 设 置 为 "clone" ， 元 素 将 被 克隆 ， 且 克隆 将 被 拖 搜 。 
e Function : 一 个 玉 数 ， 将 返回 拖 搜 时 要 使 用 的 DOMEIement, 


代码 实例 : 
初始 化 带 有 指定 helper 选项 的 draggable : 


$( ".selector" ).draggable({ helper: "clone" }); 


在 初始 化 后 ， 获 取 或 设置 helper 选项 : 
// getter 


var helper = $( ".selector" ).draggable( "option", "helper" ); 


// setter 
$( ".selector" ).draggable( "option", "helper", "clone" ); 


默认 值 : "original" 


iframeFix 


类 型 : Boolean 或 Selector 


描述 : 防止 拖 搜 期 间 iframes 捕捉 鼠标 移动 (mousemove ) 事件 。 在 与 
cursorAt 选项 结合 使 用 时 ， 或 鼠标 光标 未 覆盖 在 助手 (helper) 上 时 ， 非 常 有 
用 。 


支持 多 个 类 型 : 


e Boolean: 当 设 置 为 true 时 ， 透 明 遮 罩 将 被 放置 在 页 面 上 所 有 iframes 
上 。 
e Selector : 匹配 selector MES iframes 将 被 透明 遮 罩 履 盖 。 


代码 实例 : 


初始 化 带 有 指定 iframeFix 选项 的 draggable : 


$( ".selector" ).draggable({ iframeFix: true }); 


在 初始 化 后 ， 获 取 或 设置 iframeFix 选项 : 


// getter 
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" ` 


// setter 
$( ".selector" ).draggable( "option", "iframeFix", true ); 





默认 值 : false 


opacity 


类 型 : Number 

描述 : 当 被 拖 搜 时 助手 (helper) 的 不 透明 度 。 
代码 实例 : 

初始 化 带 有 指定 opacity 选项 的 draggable : 


$( ".selector" ).draggable({ opacity: 0.35 }); 


在 初始 化 后 ， 获 取 或 设置 opacity 选项 : 


// getter 
var Opacity = $( ".selector" ).draggable( "option", "opacity" ); 


// setter 
$( ".selector" ).draggable( "option", "opacity", 0.35 ); 


默认 值 : false 


refreshPositions 


类 型 : Boolean 


描述 : 如 果 设 置 为 true ， 在 每 次 鼠标 移动 (mousemove) 时 都 会 计算 所 有 可 放 
置 的 位 置 。 注 意 : 这 解决 了 高 度 动态 的 问题 ， 但 是 明显 降低 了 性 能 。 


代码 实例 : 


初始 化 带 有 指定 refreshPositions 选项 的 draggable : 


$( ".selector" ).draggable({ refreshPositions: true }); 


在 初始 化 后 ， 获 取 或 设置 refreshPositions 选项 : 


// getter 
var refreshPositions = $( ".selector" ).draggable( "option", "refre 


// setter 
$( ".selector" ).draggable( "option", "refreshPositions", true ); 
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默认 值 : false 





revert 


类 型 : Boolean 或 String 8% Function() 
描述 : 当 拖 搜 停止 时 ， 元 素 是 否 还 原 到 它 的 开始 位 置 
支持 多 个 类 型 : 


e Boolean : 如 果 设 置 为 true ， 元 素 总 会 还 原 。 
e String : 如 果 设 置 为 "invalid" ， 还 原 仅 在 draggable 未 放置 在 droppable 
上 时 发 生 ， 如 果 设 置 为 "valid" 则 相反 。 
e Function : 一 个 函数 ， 确 定 元 素 是 否 还 原 到 它 的 开始 位 置 。 该 玉 数 必须 返回 
true 才能 还 原 元 素 。 
代码 实例 : 


初始 化 带 有 指定 revert 选项 的 draggable : 


$( ".selector" ).draggable({ revert: true }); 


在 初始 化 后 ， 获 取 或 设置 revert 选项 : 


// getter 
var revert = $( ".selector" ).draggable( "option", "revert" ); 


// setter 
$( ".selector" ).draggable( "option", "revert", true ); 


默认 值 : false 


revertDuration 
类 型 : Number 
de : 还 原 (revert) 动画 的 持续 时 间 ， 以 宫 秒 计 。 如 果 revert 选项 是 false 


代码 实例 : 


初始 化 带 有 指定 revertDuration 选项 的 draggable : 


$( ".selector" ).draggable({ revertDuration: 200 }); 


在 初始 化 后 ， 获 取 或 设置 revertDuration 选项 : 


// getter 
var revertDuration = $( ".selector" ).draggable( "option", "revertl 








// setter 

$( ".selector" ).draggable( "option", "revertDuration", 200 ); 
«| E — Em 
默认 值 : 500 
scope 


类 型 : String 


描述 : 用 于 组 合 配套 draggable 和 droppable 项 ， 除 了 droppable 的 accept 选 
项 之 外 。 一 个 与 droppable 带 有 相同 的 scope 值 的 draggable 会 被 该 droppable 
接受 。 


代码 实例 : 
初始 化 带 有 指定 scope 选项 的 draggable : 


$( ".selector" ).draggable({ scope: "tasks" }); 


在 初始 化 后 ， 获 取 或 设置 scope 选项 : 


// getter 
var scope = $( ".selector" ).draggable( "option", "scope" ); 


// setter 


$( ".selector" ).draggable( "option", "scope", "tasks" ); 


默认 值 : "default" 


scroll 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 当 拖 搜 时 容器 会 自动 滚动 。 
代码 实例 : 


初始 化 带 有 指定 scroll 选项 的 draggable : 


$( ".selector" ).draggable({ scroll: false }); 


在 初始 化 后 ， 获 取 或 设置 scroll 选项 : 


// getter 
var scroll = $( ".selector" ).draggable( "option", "scroll" ); 


// setter 
$( ".selector" ).draggable( "option", "scroll", false ); 


默认 值 : true 


scrollSensitivity 
类 型 : Number 


描述 : 从 要 滚动 的 视 区 边缘 起 的 距离 ， 以 像素 计 。 距 离 是 相对 于 指针 的 ， 不 是 相对 
于 draggable。 如 果 scroll 选项 是 false 则 忽略 。 


代码 实例 : 


初始 化 带 有 指定 scrollSensitivity 选项 的 draggable : 


$( ".selector" ).draggable({ scrollSensitivity: 100 }); 


在 初始 化 后 ， 获 取 或 设置 scrollSensitivity 选项 : 


// getter 
var scrollSensitivity = $( ".selector" ).draggable( "option", "scr 


// setter 
$( ".selector" ).draggable( "option", "scrollSensitivity", 100 ); 


默认 值 : 20 





scrollSpeed 
类 型 : Number 


描述 : 当 鼠 标 指 针 获 取 到 在 scrollSensitivity 距离 内 时 ， 窗 体 滚动 的 速度 。 
如 果 scroll 选项 是 false 则 忽略 。 


代码 实例 : 
初始 化 带 有 指定 scrollSpeed 选项 的 draggable : 


$( ".selector" ).draggable({ scrollSpeed: 100 }); 


在 初始 化 后 ， 获 取 或 设置 scrollSpeed 选项 : 


// getter 
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpee 


// setter 
$( ".selector" ).draggable( "option", "scrollSpeed", 100 ); 


«| == 








默认 值 : 20 


snap 


类 型 : Boolean 或 Selector 


描述 : 元 素 是 否 对 齐 到 其 他 元 素 。 


支持 多 个 类 型 : 
e Boolean: 当 设 置 为 true 时 ， 元 素 会 对 齐 到 其 它 可 拖 搜 (draggable ) 元 
。 Selector : 一 个 选择 器 ， 指 定 要 对 齐 到 哪个 元 素 。 

代码 实例 : 


初始 化 带 有 指定 snap 选项 的 draggable : 


$( ".selector" ).draggable({ snap: true }); 


在 初始 化 后 ， 获 取 或 设置 snap 选项 : 


// getter 
var snap = $( ".selector" ).draggable( "option", "snap" ); 


// setter 
$( ".selector" ).draggable( "option", "snap", true ); 


默认 值 : false 


snapMode 


类 型 : String 


描述 : 决定 draggable 将 对 齐 到 对 齐 元 素 的 哪个 边缘 。 如 果 snap 选项 是 
false 则 忽略 。 可 能 的 值 : "inner" 、 "outer" 、 "both" , 


代码 实例 : 
初始 化 带 有 指定 snapMode 选项 的 draggable : 


$( ".selector" ).draggable({ snapMode: "inner" }); 


在 初始 化 后 ， 获 取 或 设置 snapMode 选项 : 


// getter 
var snapMode = $( ".selector" ).draggable( "option", "snapMode" ); 


// setter 
$( ".selector" ).draggable( "option", "snapMode", "inner" ); 


加 [El:::fcl 
默认 值 : "both" 


snapTolerance 
类 型 : Number 


描述 : 从 要 发 生 对 齐 的 对 齐 元 素 边 缘起 的 距离 ， 以 像素 计 。 如 果 snap 选项 是 
false 则 忽略 。 


代码 实例 : 


初始 化 带 有 指定 snapTolerance 选项 的 draggable : 


$( ".selector" ).draggable({ snapTolerance: 30 }); 


在 初始 化 后 ， 获 取 或 设置 snapTolerance 选项 : 


// getter 
var snapTolerance = $( ".selector" ).draggable( "option", "snapTole 


// setter 
$( ".selector" ).draggable( "option", "snapTolerance", 30 ); 
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默认 值 : 20 





stack 


类 型 : Selector 


描述 : 控制 匹配 选择 器 (selector) 的 元 素 集 合 的 z-index， 总 是 在 当前 拖 搜 项 的 前 
面 ， 在 类 似 窗口 管 理 器 这 样 的 事物 中 非常 有 用 。 


代码 实例 : 
初始 化 带 有 指定 stack 选项 的 draggable : 


$( ".selector" ).draggable({ stack: ".products" 3); 


在 初始 化 后 ， 获 取 或 设置 stack 选项 : 


// getter 
var stack = $( ".selector" ).draggable( "option", "stack" ); 


// setter 


$( ".selector" ).draggable( "option", "stack", ".products" ); 


默认 值 : false 


zlndex 

类 型 : Number 

描述 : 当 被 拖 搜 时 ， 助 手 (helper) 的 Z-index。 
代码 实例 : 

初始 化 带 有 指定 zIndex 选项 的 draggable : 


$( ".selector" ).draggable({ zIndex: 100 }); 


在 初始 化 后 ， 获 取 或 设置 zIndex 选项 : 


// getter 
var zIndex = $( ".selector" ).draggable( "option", "zIndex" ); 


// setter 
$( ".selector" ).draggable( "option", "zIndex", 100 ); 


默认 值 : false 


方法 


destroy() 

类 型 : jQuery (plugin only) 

描述 : SES 32 draggable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).draggable( "destroy" ) 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 draggable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).draggable( "disable" ) 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 draggable, 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).draggable( "enable" ) 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 


e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 


var isDisabled = $( ".selector" ).draggable( "option", "disabled" ` 


gr 








option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 draggable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).draggable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 draggable 选项 的 值 。 


e optionName X Z! : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).draggable( "option", "disabled", true ) 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 draggable 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 


调用 该 方法 : 


$( ".selector" ).draggable( "option", { disabled: true } ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 draggable 元 素 的 jQuery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).draggable( "widget" ) 


事件 


create( event, ui ) 
类 型 : dragcreate 
描述 : 当 draggable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 draggable : 


$( ".selector" ).draggable({ 
create: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 dragcreate 事件 : 


$( ".selector" ).on( "dragcreate", function( event, ui ) {} ); 


drag( event, ui ) 


类 型 : drag 
描述 : 在 拖 搜 期 间 当 鼠标 移动 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o he Per : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 CSS 位 置 ， 比 如 
{ top, left ) 对 象 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 偏 移 位 置 ， 比 如 
{ top, left ) WR. 


代码 实例 : 
初始 化 带 有 指定 drag 回调 的 draggable : 
$( ".selector" ).draggable({ 


drag: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 drag BE : 


$( "selector" ).on( "drag", function( event, ui ) {} ); 


start( event, ui ) 
类 型 : dragstart 
描述 : 当 拖 搜 开始 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o iUe c : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 CSS 位 置 ， 比 如 
{ top, left } 对 象 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 偏 移 位 置 ， 比 如 
{ top, left } 对 象 。 


代码 实例 : 
初始 化 带 有 指定 start 回调 的 draggable : 


$( ".selector" ).draggable({ 
start: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 dragstart 事件 : 


$( ".selector" ).on( "dragstart", function( event, ui ) {} ); 


stop( event, ui ) 


类 型 : dragstop 
描述 : 当 拖 搜 停止 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o jud > : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 CSS 位 置 ， 比 如 
{ top, left } 对 象 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 偏 移 位 置 ， 比 如 
{ top, left } 对 象 。 


代码 实例 : 
初始 化 带 有 指定 stop 回调 的 draggable : 


$( ".selector" ).draggable({ 
stop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dragstop 事件 : 


$( ".selector" ).on( "dragstop", function( event, ui ) {} ); 


实例 


一 个 简单 的 jQuery UI 可 拖 搜 小 部 件 (Draggable Widget) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 拖 搜 小 部 件 (Draggable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#draggable { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id="draggable"> 请 拖 搜 我 1 </div> 
<script> 
$( "#draggable" ).draggable(); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 可 放置 小 部 件 (Droppable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 为 可 拖 搜 小 部 件 创建 目标 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : jQuery Ul 可 放置 (Droppable) 插件 让 被 选 元 素 可 放置 (意味 着 它们 在 拖 搜 
后 接受 被 放置 ) 。 您 可 以 逐个 指定 哪 一 个 draggable 会 接受 。 
快速 导航 


选项 


acceptactiveClassaddClassesdisabledgreedyhoverClassscopetolerance | destr 


accept 

类 型 : Selector 或 Function() 

描述 : 控制 哪个 可 拖 搜 (draggable) 元 素 可 被 droppable 接受 。 

支持 多 个 类 型 : 
e Selector: 一 个 选择 器 ， 指 定 哪个 可 抑 搜 (draggable) 元 素 可 被 droppable 接 
e ae, : 一 个 函数 ， 将 被 页 面 上 每 个 draggable 调用 (作为 第 一 个 参数 传 

MARR) 。 如 果 draggable 被 接受 ， 该 函数 必须 返回 true o 
代码 实例 : 
初始 化 带 有 指定 accept 选项 的 droppable : 


$( ".selector" ).droppable({ accept: ".special" }); 


在 初始 化 后 ， 获 取 或 设置 accept 选项 : 


// getter 
var accept = $( ".selector" ).droppable( "option", "accept" ); 


// setter 
$( ".selector" ).droppable( "option", "accept", ".special" ); 


默认 值 : "nx" 


activeClass 
X 8! : String 


描述 : 如 果 指 定 了 该 选项 ， 当 一 个 可 接受 的 draggable 被 拖 搜 时 ，class 将 被 添加 
到 droppable。 


代码 实例 : 


初始 化 带 有 指定 activeClass 选项 的 droppable : 


$( ".selector" ).droppable({ activeClass: "ui-state-highlight" }); 
了 — Bi 


在 初始 化 后 ， 获 取 或 设置 activeClass 选项 : 


// getter 
var activeClass = $( ".selector" ).droppable( "option", "activeCla: 


// setter 
$( ".selector" ).droppable( "option", "activeClass", "ui-state-higl 
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默认 值 : false 





addClasses 


类 型 : Boolean 


描述 : 如 果 设 置 为 ”false ， 将 防止 ui-droppable class 被 添加 。 这 在 数 百 个 
元 素 上 调用 .droppable() 时 有 助 于 性 能 优化 。 


代码 实例 : 


初始 化 带 有 指定 addClasses 选项 的 droppable : 


$( ".selector" ).droppable({ addClasses: false }); 


在 初始 化 后 ， 获 取 或 设置 addClasses 选项 : 


// getter 
var addClasses = $( ".selector" ).droppable( "option", "addClasses' 


// setter 
$( ".selector" ).droppable( "option", "addClasses", false ); 


PL "i. 


默认 值 : true 





disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 droppable。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 droppable : 


$( ".selector" ).droppable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).droppable( "option", "disabled" ); 


// setter 
$( ".selector" ).droppable( "option", "disabled", true ); 


b BR 


默认 值 : false 


greedy 
类 型 : Boolean 


描述 : 默认 情况 下 ， 当 一 个 元 素 被 放置 在 蔚 套 是 droppable 上 时 ， 每 个 droppable 
将 接收 该 元 素 。 然 而 ， 通 过 设置 该 选项 为 true ， 任 何 父 元 素 的 droppable 将 无 
法 接收 该 元 素 。 drop 事件 仍 将 照常 ， 但 会 检查 event.target 以 便 查看 哪个 


droppable 接收 draggable 元 素 。 
代码 实例 : 
初始 化 带 有 指定 greedy 选项 的 droppable : 


$( ".selector" ).droppable({ greedy: true }); 


在 初始 化 后 ， 获 取 或 设置 greedy 选项 : 


// getter 
var greedy = $( ".selector" ).droppable( "option", "greedy" ); 


// setter 
$( ".selector" ).droppable( "option", "greedy", true ); 


默认 值 : false 


hoverClass 
类 型 : String 


描述 : 如 果 指 定 了 该 选项 ， 当 一 个 可 接受 draggable 被 覆盖 在 droppable 上 时 ， 
class 将 被 添加 到 droppable。 


代码 实例 : 


初始 化 带 有 指定 hoverclass 选项 的 droppable : 


$( ".selector" ).droppable({ hoverClass: "drop-hover" }); 


在 初始 化 后 ， 获 取 或 设置 hoverClass 选项 : 


// getter 
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass' 


// setter 
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" ), 
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默认 值 : false 





scope 


类 型 : String 


描述 : 用 于 组 合 配套 draggable 和 droppable 项 ， 除 了 droppable 的 accept 3& 
项 之 外 。 一 个 与 droppable 带 有 相同 的 scope 值 的 draggable 会 被 该 droppable 
接受 。 


代码 实例 : 
初始 化 带 有 指定 scope 选项 的 droppable : 


$( ".selector" ).droppable({ scope: "tasks" }); 


在 初始 化 后 ， 获 取 或 设置 scope 选项 : 


// getter 
var scope = $( ".selector" ).droppable( "option", "scope" ); 


// setter 
$( ".selector" ).droppable( "option", "scope", "tasks" ); 


默认 值 : "default" 


tolerance 
类 型 : String 


描述 : 指定 用 于 测试 一 个 draggable 是 否 履 盖 在 一 个 droppable 上 的 模式 。 可 能 的 
fà : 


"fit" : draggable Sf #7 droppable 上 。 

"intersect" : draggable Æ & T£ droppable 上 ， 两 个 方向 上 至 少 50%。 
"pointer" : 鼠标 指针 重生 在 droppable 上 。 

"touch" : draggable Æ & f£ droppable 上 ， 任 何 数量 此 可 。 

代码 实例 : 


初始 化 带 有 指定 tolerance 选项 的 droppable : 


$( ".selector" ).droppable({ tolerance: "fit" }); 


在 初始 化 后 ， 获 取 或 设置 tolerance 选项 : 


// getter 
var tolerance = $( ".selector" ).droppable( "option", "tolerance" ` 


// setter 
$( ".selector" ).droppable( "option", "tolerance", "fit" ); 
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默认 值 : "intersect" 
方法 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 droppable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).droppable( "destroy" ); 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 droppable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).droppable( "disable" ) 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 droppable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).droppable( "enable" ); 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 
var isDisabled = $( ".selector" ).droppable( "option", "disabled" ` 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 droppable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).droppable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 droppable 选项 的 值 。 


e optionName 类 型 : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).droppable( "option", "disabled", true ); 


option( options ) 


类 型 : jQuery (plugin only) 


描述 : 为 droppable 设置 一 个 或 多 个 选项 。 

e options 类 型 : Object 描述 : 要 设置 的 option-value 对 。 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).droppable( "option", { disabled: true } ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 droppable 元 素 的 jQuery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).droppable( "widget" ) 


事件 


activate( event, ui ) 


类 型 : dropactivate 


描述 : 当 一 个 可 接受 的 draggable 开始 拖 搜 时 触发 。 如 果 您 想 让 droppable 被 放置 
vi. 该 选项 就 可 以 派 上 用 场 。 


e event 类 型 : Event 
e ui 类 型 : Object 


o draggable 3: €! : jQuery 描述 : jQuery 对 象 ， 表 示 draggable 元 素 。 
o helper 类 型 : 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
(helper) 。 


o position 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 CSS 位 
置 ， 比 如 { top, left ) WR. 
o offset 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 偏 移 位 置 
比如 { top, left } 对 象 。 
代码 实例 : 


初始 化 带 有 指定 activate 回调 的 droppable : 


$( ".selector" ).droppable({ 
activate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dropactivate 事件 : 


$( ".selector" ).on( "dropactivate", function( event, ui ) {} ); 


create( event, ui ) 


类 型 : dropcreate 
描述 : 当 droppable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 droppable : 


$( ".selector" ).droppable({ 
create: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 dropcreate 事件 : 


$( "selector" ).on( "dropcreate", function( event, ui ) t5; 


deactivate( event, ui ) 


类 型 : dropdeactivate 
描述 : 当 一 个 可 接受 的 draggable 停止 拖 搜 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o draggable 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 draggable 元 素 。 
o ee - : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 CSS 位 
置 ， 比 如 { top, left ) WR. 
o offset 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 偏 移 位 置 ， 


比如 { top, left ) 对 象 。 
代码 实例 : 
初始 化 带 有 指定 deactivate 回调 的 droppable : 
$( ".selector" ).droppable({ 


deactivate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dropdeactivate 事件 : 


$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} ); 


M | 
drop( event, ui ) 


类 型 : drop 


描述 : 当 一 个 可 接受 的 draggable 被 放置 在 droppable (基于 
[tolerance](#option-tolerance) 选项 ) 上 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o draggable 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 draggable 元 素 。 
o pain P : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) o 
o position 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 CSS 位 
置 ， 比 如 { top, left ) WR. 
o offset 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 偏 移 位 置 ， 
比如 { top, left ) 对 象 。 


代码 实例 : 
初始 化 带 有 指定 drop 回调 的 droppable : 


$( ".selector" ).droppable({ 
drop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 drop 事件 : 


$( ".selector" ).on( "drop", function( event, ui ) {} ); 


out( event, ui ) 


类 型 : dropout 


描述 : 当 droppable 被 拖 搜 出 droppable (基于 
[tolerance](#option-tolerance) 选项 ) 时 触发 。 


e event 类 型 : Event 

e ui 类 型 : Object 
注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 out 回调 的 droppable : 


$( ".selector" ).droppable({ 
out: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 dropout 事件 : 


$( ".selector" ) .on( “dropout”, function( event, ui ) 13 ); 


over( event, ui ) 


类 型 : dropover 


描述 : 当 一 个 可 接受 的 draggable 被 拖 搜 在 droppable (基于 
[tolerance](#option-tolerance) 选项 ) 上 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o draggable 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 draggable 元 素 。 
o pn m : jQuery 描述 : jQuery 对 象 ， 表 示 被 拖 搜 的 助手 
helper) 。 
o position 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 CSS 位 
置 ， 比 如 { top, left ) WR. 
o offset 类 型 : Object 描述 : draggable 助手 (helper) 的 当前 偏 移 位 置 ， 
比如 ( top, left ) 对 象 。 


代码 实例 : 
初始 化 带 有 指定 over 回调 的 droppable : 
$( ".selector" ).droppable({ 


over: function( event, ui ) {} 


T); 


绑 定 一 个 事件 监听 器 到 dropover 事件 : 


$( ".selector" ).on( "dropover", function( event, ui ) {} ); 


实例 


一 对 draggable 和 droppable 元 素 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 放置 小 部 件 (Droppable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#draggable { 
width: 100px; 
height: 100px; 
background: £Zccc; 


} 

#droppable { 
position: absolute; 
left: 250px; 
top: 0; 
width: 125px; 
height: 125px; 
background: #999; 
color: #fff; 
padding: 10px; 


} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id="droppable"> 请 放置 到 这 里 1 </div> 
<div id="draggable"> 请 拖 搜 我 1 </div> 


<script> 
$( "#draggable" ).draggable(); 
$( "#droppable" ).droppable(1 
drop: function() { 
alert( "dropped" ); 
} 
}); 


</script> 


</body> 
</html> 


SSS 





jQuery UI API - 鼠标 交互 (Mouse Interaction) 


所 属 类 别 


交互 (Interactions) | 实用 工具 (Utilities) 


用 法 
描述 : 基本 交互 层 。 
依赖 : 

e MEX (Widget Factory) 
注释 :与 jQuery.Widget AU, BRA RBJEHBSATIEIBEEERB. REPS 
给 其 他 小 部 件 继承 用 的 基础 层 。 该 页 面 有 添加 到 jQuery.widget 的 文档 ， 但 是 
它 包含 了 不 能 被 覆盖 的 内 部 方法 。 公 共 的 API 是 


_mouseStart() 、 _mouseDrag() 、  mouseStop() 和 
_mouseCapture() o 


快速 导航 
选项 


canceldelaydistance _mouseCapture_mouseDelayMet_mouseDestroy_mouse 


cancel 

类 型 : Selector 

描述 : 防止 从 指定 的 元 素 上 开始 交互 。 
代码 实例 : 


初始 化 带 有 指定 cancel 选项 的 mouse : 


$( ".selector" ).mouse({ cancel: ".title" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).mouse( "option", "cancel" ); 


// setter 


$( ".selector" ).mouse( "option", "cancel", ".title" ); 


默认 值 : "input, textarea, button, select, option" 


delay 
类 型 : Number 


描述 : 鼠标 按 下 后 直至 交互 开始 的 事件 ， 以 毫秒 计 。 该 选项 可 用 于 防止 点 击 在 一 个 
元 素 上 时 不 必要 的 交互 。 


代码 实例 : 
初始 化 带 有 指定 delay 选项 的 mouse : 


$( ".selector" ).mouse({ delay: 300 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).mouse( "option", "delay" ); 


// setter 


$( ".selector" ).mouse( "option", "delay", 300 ); 


默认 值 : 0 


distance 
类 型 : Number 


描述 : 鼠标 按 下 后 交互 开始 前 鼠标 必须 移动 的 距离 ， 以 像素 计 。 该 选项 可 用 于 防止 
点 击 在 一 个 元 素 上 时 不 必要 的 交互 。 


代码 实例 : 
初始 化 带 有 指定 distance 选项 的 mouse : 


$( ".selector" ).mouse({ distance: 10 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).mouse( "option", "distance" ); 


// setter 


$( ".selector" ).mouse( "option", "distance", 10 ); 


默认 值 : 1 
方法 


_mouseCapture() 
类 型 : Boolean 


描述 : 决定 交互 是 否 应 该 基于 交互 的 事件 目标 开始 。 默 认 的 实现 总 是 返回 


true ov 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseCapture 方法 : 


$( ".selector" ).mouse( " mouseCapture" ); 


. mouseDelayMet() 

类 型 : Boolean 

描述 : 决定 [delay](#option-delay) 选项 是 否 满足 当前 交互 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 _mouseDelayMet 方法 : 


$( ".selector" ).mouse( " mouseDelayMet" ); 


. mouseDestroy() 


类 型 : jQuery (plugin only) 


描述 : BRAAS ERB. SUDGSRIIKES RADARE destroy() A 


法 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseDestroy 方法 : 


$( ".selector" ).mouse( " mouseDestroy" ); 


. mouseDistanceMet() 

类 型 : Boolean 

描述 : 决定 [distance](Zoption-distance) 选项 是 否 满 足 当 前 交互 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 _mouseDistanceMet 方法 : 


$( ".selector" ).mouse( " mouseDistanceMet" ); 


_mouseDown() 


类 型 : jQuery (plugin only) 


描述 : 处 理 交 互 的 开始 。 确 认 与 主要 的 鼠标 按钮 关联 的 事件 ， 确 保 
[delay](#option-delay) 与 [distance](#option-distance) 在 交互 启动 

之 前 得 到 满足 。 当 交互 已 经 准备 开始 ， 为 要 义理 的 扩展 小 部 件 调 用 
[_mouseStart](#method-_mouseStart) 方法 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseDown 方法 : 


$( ".selector" ).mouse( " mouseDown" ); 


_mouseDrag() 


类 型 : jQuery (plugin only) 


描述 : 扩展 小 部 件 应 实现 一 个 _mouseDrag() 方法 ， 来 处 理 交 互 的 每 个 移动 。 该 
方法 将 接收 与 鼠标 移动 相关 联 的 鼠标 事件 。 


。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
调用 _mouseDrag 方法 : 


$( ".selector" ).mouse( " mouseDrag" ); 


_mouselnit() 


类 型 : jQuery (plugin only) 


描述 : 初始 化 交互 事件 处 理 程序 。 这 必须 调用 来 自 扩 展 的 小 部 件 的 create() 
方法 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouselnit 方法 : 


$( ".selector" ).mouse( " mouseInit" ); 


_mouseMove() 

类 型 : jQuery (plugin only) 

描述 : 义理 交互 的 每 个 移动 。 为 要 义理 的 扩展 小 部 件 调用 _mouseDrag 方法 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 _mouseMove 方法 : 


$( ".selector" ).mouse( " mouseMove" ) 


. mouseStart() 
类 型 : jQuery (plugin only) 


描述 : 扩展 小 部 件 应 实现 一 个 mousestart() 方法 ， 来 处 理 交 互 的 开始 。 该 方 
法 将 接收 与 交互 开始 相关 联 的 鼠标 事件 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseStart 方法 : 


$( ".selector" ).mouse( "_mouseStart" ); 


_mouseStop() 


类 型 : jQuery (plugin only) 


描述 : 扩展 小 部 件 应 实现 一 个 _mouseStop() 方法 ， 来 处 理 交 互 的 结束 。 该 方法 
将 接收 与 交互 结束 相关 联 的 鼠标 事件 。 


。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 _mouseStop 方法 : 


$( ".selector" ).mouse( " mouseStop" ); 


_mouseUp() 

类 型 : jQuery (plugin only) 

描述 : 义理 交互 的 结束 。 为 要 义理 的 扩展 小 部 件 调用 _mouseStonp 方法 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 _mouseUp 方法 : 


$( ".selector" ).mouse( " mouseUp" ); 


jQuery UI API - 可 调整 尺寸 小 部 件 (Resizable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 使 用 鼠标 改变 元 素 的 尺寸 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : jQuery Ul 可 调整 尺寸 (Resizable) 插件 让 被 选 元 素 可 调整 尺寸 (意味 着 它 
们 有 可 拖 搜 的 调整 大 小 的 手柄 ) 。 您 可 以 指定 一 个 或 多 个 手柄 ， 也 可 以 指定 宽度 和 
高 度 的 最 小 值 也 最 大 值 。 


附加 说 明 : 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 
定义 的 主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


快速 导航 


alsoResizeanimateanimateDurationanimateEasingaspectRatioautoHidecancelco 


alsoResize 

类 型 : Selector 或 jQuery 或 Element 

描述 : 一 个 或 多 个 通过 resizable 元 素 进行 同步 调整 尺寸 的 元 素 。 
代码 实例 : 


初始 化 带 有 指定 alsoResize 选项 的 resizable : 


$( ".selector" ).resizable({ alsoResize: "#mirror" }); 


在 初始 化 后 ， 获 取 或 设置 alsoResize 选项 : 








// getter 
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize' 
// setter 
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" ); 
«| = — 
默认 值 : false 
animate 


类 型 : Boolean 
描述 : 调整 尺寸 后 动态 变化 到 最 终 尺寸 。 
代码 实例 : 


初始 化 带 有 指定 animate 选项 的 resizable : 


$( ".selector" ).resizable({ animate: true }); 


在 初始 化 后 ， 获 取 或 设置 animate 选项 : 


// getter 
var animate = $( ".selector" ).resizable( "option", "animate" ); 


// setter 
$( ".selector" ).resizable( "option", "animate", true ); 


默认 值 : false 


animateDuration 

类 型 : Number 或 String 

描述 : 当 使 用 [animate](#option-animate) 选项 时 ， 动 画 持续 的 时 间 。 
支持 多 个 类 型 : 


e Number : 持续 时 间 ， 以 宫 秒 计 。 
e String: 一 个 命名 的 持续 时 间 ， 比 如 "slow" 或 "fast" 。 


代码 实例 : 


初始 化 带 有 指定 animateDuration 选项 的 resizable : 


$( ".selector" ).resizable({ animateDuration: "fast" }); 


在 初始 化 后 ， 获 取 或 设置 animateDuration 选项 : 








// getter 
var animateDuration = $( ".selector" ).resizable( "option", "anima! 
// setter 
$( ".selector" ).resizable( "option", "animateDuration", "fast" ); 
‘| 
默认 值 : "slow" 
animateEasing 


类 型 : String 
描述 : 当 使 用 [animate](#option-animate) 选项 时 要 使 用 的 Easings。 
代码 实例 : 


初始 化 带 有 指定 animateEasing 选项 的 resizable : 


$( ".selector" ).resizable({ animateEasing: "easeOutBounce" }); 


在 初始 化 后 ， 获 取 或 设置 animateEasing 选项 : 


// getter 
var animateEasing = $( ".selector" ).resizable( "option", "animatet 


// setter 
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBour 


LEN 


默认 值 : "swing" 





aspectRatio 
类 型 : Boolean 或 Number 
描述 : 元 素 是 否 应 该 被 限制 在 一 个 特定 的 长 宽 比 。 
支持 多 个 类 型 : 
e Boolean: 当 设 置 为 true 时， 元 素 将 保持 其 原 有 的 长 宽 比 。 


e Number : 强制 在 调整 尺寸 时 元 素 保 持 特定 的 长 宽 比 。 
代码 实例 : 


初始 化 带 有 指定 aspectRatio 选项 的 resizable : 


$( ".selector" ).resizable({ aspectRatio: true }); 


在 初始 化 后 ， 获 取 或 设置 aspectRatio 选项 : 


// getter 
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRat: 


// setter 
$( ".selector" ).resizable( "option", "aspectRatio", true ); 


BE 


默认 值 : false 





autoHide 

类 型 : Boolean 

描述 : 当 用 户 妃 标 没 有 关 浮 在 元 素 上 时 是 否 隐藏 手柄 。 
代码 实例 : 


初始 化 带 有 指定 autoHide 选项 的 resizable : 


$( ".selector" ).resizable({ autoHide: true }); 


在 初始 化 后 ， 获 取 或 设置 autoHide 选项 : 


// getter 
var autoHide = $( ".selector" ).resizable( "option", "autoHide" ); 


// setter 
$( ".selector" ).resizable( "option", "autoHide", true ); 


| 
默认 值 : false 
cancel 


类 型 : Selector 


描述 : 防止 从 指定 的 元 素 上 开始 调整 尺寸 。 
代码 实例 : 


初始 化 带 有 指定 cancel 选项 的 resizable : 


$( ".selector" ).resizable({ cancel: ".cancel" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).resizable( "option", "cancel" ); 


// setter 
$( ".selector" ).resizable( "option", "cancel", ".cancel" ); 


默认 值 : "input, textarea, button, select, option" 


containment 

类 型 : Selector 或 Element 或 String 

描述 : 约束 在 指定 元 素 或 区 域 的 边界 内 调整 尺寸 。 
支持 多 个 类 型 : 


e Selector : 可 调整 尺寸 元 素 将 被 包含 在 selector 第 一 个 元 素 的 边界 内 。 如 果 未 
找到 元 素 ， 则 不 设置 containment, 
e Element : 可 调整 尺寸 元 素 将 被 包含 在 元 素 的 边界 内 。 
e String : 可 能 的 值 : "parent" 、 "document" , 
代码 实例 : 


初始 化 带 有 指定 containment 选项 的 resizable : 


$( ".selector" ).resizable({ containment: "parent" }); 


在 初始 化 后 ， 获 取 或 设置 containment 选项 : 


// getter 
var containment = $( ".selector" ).resizable( "option", "containmer 


// setter 
$( ".selector" ).resizable( "option", "containment", "parent" ); 





«| s 








默认 值 : false 


delay 

类 型 : Number 

描述 : 鼠标 按 下 后 直到 调整 尺寸 开始 为 止 的 时 间 ， 以 毫秒 计 。 如 果 指 定 了 该 选项 ， 
调整 只 有 在 鼠标 移动 超过 时 间 后 才 开 始 。 该 选项 可 以 防止 点 击 在 某 个 元 素 上 时 不 必 
要 的 调整 尺寸 。 

代码 实例 : 

初始 化 带 有 指定 delay iM resizable : 


$( ".selector" ).resizable({ delay: 150 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).resizable( "option", "delay" ); 


// setter 
$( ".selector" ).resizable( "option", "delay", 150 ); 


默认 值 : 0 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 resizable。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 resizable : 


$( ".selector" ).resizable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).resizable( "option", "disabled" ); 


// setter 
$( ".selector" ).resizable( "option", "disabled", true ); 


«] m — BE | 





默认 值 : false 


distance 

类 型 : Number 

描述 : 鼠标 按 下 后 调整 尺寸 开始 前 必须 移动 的 距离 ， 以 像素 计 。 如 果 指 定 了 该 选 
项 ， 调 整 只 有 在 鼠标 移动 超过 距离 后 才 开 始 。 该 选项 可 以 防止 点 击 在 某 个 元 素 上 时 
不 必要 的 调整 尺寸 。 

代码 实例 : 


初始 化 带 有 指定 distance 选项 的 resizable : 


$( ".selector" ).resizable({ distance: 30 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).resizable( "option", "distance" ); 


// setter 
$( ".selector" ).resizable( "option", "distance", 30 ); 


Aoo 了 | 
默认 值 : 1 

ghost 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 为 调整 尺寸 显示 一 个 半 透 明 的 辅助 元 素 。 

代码 实例 : 


初始 化 带 有 指定 ghost 选项 的 resizable : 


$( ".selector" ).resizable({ ghost: true }); 


在 初始 化 后 ， 获 取 或 设置 ghost 选项 : 


// getter 
var ghost = $( ".selector" ).resizable( "option", "ghost" ); 


// setter 


$( ".selector" ).resizable( "option", "ghost", true ); 


默认 值 : false 
grid 
类 型 : Array 


描述 : 把 可 调整 尺寸 元 素 对 齐 到 网 格 ， 每 个 x 和 y 像素 。 数 组 形式 必须 是 
[ x, y]。 


代码 实例 : 
初始 化 带 有 指定 grid 选项 的 resizable : 


$( ".selector" ).resizable({ grid: [ 20, 10 ] }); 


在 初始 化 后 ， 获 取 或 设置 grid 3t 


u 
= 


// getter 
var grid = $( ".selector" ).resizable( "option", "grid" ); 


// setter 
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] ); 


默认 值 : false 


handles 

类 型 : String 或 Object 

描述 : 可 用 于 调整 尺寸 的 处 理 程 序 。 
支持 多 个 类 型 : 


e String : 一 个 去 号 分 隔 的 列表 ， 列 表 值 为 下 面 所 列 出 的 任意 值 : n, e, s, w, ne, 
se, sw, nw, all。 必 要 的 处 理 程序 由 插件 自动 生成 。 

e Object : 支持 下 面 的 键 : (n, e, s, w, ne, se, sw, nw }。 任 何 指定 的 值 应 该 是 一 
个 匹配 作为 义理 程序 使 用 的 resizable 的 子 元 素 的 jQuery 选择 器 。 


注释 : 当 生 成 您 自己 的 处 理 程序 时 ， 每 个 处 理 程 序 必须 有 
ui-resizable-handle class， 也 可 以 是 适当 的 
appropriate ui-resizable-{direction} class， 比 如 ui-resizable-s. 


代码 实例 : 


初始 化 带 有 指定 handles 选项 的 resizable : 


$( ".selector" ).resizable({ handles: "n, e, s, w" }); 


在 初始 化 后 ， 获 取 或 设置 handles 选项 : 


// getter 
var handles = $( ".selector" ).resizable( "option", "handles" ); 


// setter 


$( ".selector" ).resizable( "option", "handles", "n, e, s, w" ); 


默认 值 : "e, s, se" 


helper 
类 型 : String 


描述 : 一 个 将 被 添加 到 代理 元 素 的 class 名 称 ， 用 于 描绘 调整 手柄 拖 搜 过 程 中 调整 
的 轮廓 。 一 旦 调整 完成 ， 原 来 的 元 素 则 被 重新 定义 尺寸 。 


代码 实例 : 


初始 化 带 有 指定 helper 选项 的 resizable : 
$( ".selector" ).resizable({ helper: "resizable-helper" }); 


在 初始 化 后 ， 获 取 或 设置 helper 选项 : 


// getter 
var helper = $( selector ).resizable( "option", "helper" ); 


// setter 
$( ".selector" ).resizable( "option", "helper", "resizable-helper" 





默认 值 : false 


maxHeight 


类 型 : Number 
描述 : resizable 允许 被 调整 到 的 最 大 高 度 。 
代码 实例 : 


初始 化 带 有 指定 maxHeight 选项 的 resizable : 


$( ".selector" ).resizable({ maxHeight: 300 }); 


在 初始 化 后 ， 获 取 或 设置 maxHeight 选项 : 


// getter 
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" 


// setter 
$( ".selector" ).resizable( "option", "maxHeight", 300 ); 





默认 值 null 


maxWidth 

类 型 : Number 

描述 : resizable 人 允许 被 调整 到 的 最 大 宽度 。 
代码 实例 : 


初始 化 带 有 指定 maxwidth 选项 的 resizable : 


$( ".selector" ).resizable({ maxwidth: 300 }); 


在 初始 化 后 ， 获 取 或 设置 maxwidth 选项 : 


// getter 
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" ); 


// setter 
$( ".selector" ).resizable( "option", "maxWwidth", 300 ); 


E | 
默认 值 : null 


minHeight 


类 型 : Number 
描述 : resizable 允许 被 调整 到 的 最 小 高 度 。 
代码 实例 : 


初始 化 带 有 指定 minHeight 选项 的 resizable : 


$( ".selector" ).resizable({ minHeight: 150 }); 


在 初始 化 后 ， 获 取 或 设置 minHeight 选项 : 


// getter 
var minHeight = $( ".selector" ).resizable( "option", "minHeight" 


// setter 
$( ".selector" ).resizable( "option", "minHeight", 150 ); 





默认 值 : 10 


minWidth 

类 型 : Number 

描述 : resizable 人 允许 被 调整 到 的 最 小 宽度 。 
代码 实例 : 


初始 化 带 有 指定 minwidth 选项 的 resizable : 


$( ".selector" ).resizable({ minWwidth: 150 }); 


在 初始 化 后 ， 获 取 或 设置 minwidth 选项 : 


// getter 
var minwidth = $( ".selector" ).resizable( "option", "minWidth" ); 


// setter 
$( ".selector" ).resizable( "option", "minWidth", 150 ); 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 resizable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).resizable( "destroy" ) 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 resizable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).resizable( "disable" ) 


enable() 
类 型 : jQuery (plugin only) 
描述 : FA resizable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).resizable( "enable" ) 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 


e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 


var isDisabled = $( ".selector" ).resizable( "option", "disabled" ` 


E 








option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 resizable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).resizable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 resizable 选项 的 值 。 


e optionName 类 型 String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).resizable( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 resizable 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 


调用 该 方法 : 


$( ".selector" ).resizable( "option", { disabled: true } ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 resizable 元 素 的 jQuery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).resizable( "widget" ); 


事件 


create( event, ui ) 
类 型 : resizecreate 
描述 : 当 resizable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 resizable : 


$( ".selector" ).resizable({ 
create: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 resizecreate 事件 : 


$( ".selector" ) .on( "resizecreate", function( event, ui ) {} 


resize( event, ui ) 


类 型 : resize 
描述 : 在 调整 尺寸 期 间 当 调整 手柄 拖 搜 时 触发 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o element 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 要 被 调整 尺寸 的 元 素 。 
o helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 调整 尺寸 的 助手 


(helper) 。 
o originalElement 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 包 囊 之 前 的 原 
始 元 素 。 


o originalPosition 类 型 : Object 描述 : resizable 调整 前 的 位 置 ， 表 示 为 
+ EOD, lent Mi 
o originalSize 类 型 : Object 描述 : resizable 调整 前 的 尺寸 ， 表 示 为 
{ width, height } 。 
o position 类 型 : Object 描述 : 当前 位 置 ， 表 示 为 { top, left } 。 
o size 类 型 : Object 描述 : 当前 位 置 ， 表 示 为 { width, height } 。 
代码 实例 : 


初始 化 带 有 指定 resize 回调 的 resizable : 


$( ".selector" ).resizable({ 
resize: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 resize 事件 : 


$( ".selector" ).on( "resize", function( event, ui ) {} ); 


start( event, ui ) 
类 型 : resizestart 
描述 : 当 调 整 尺寸 操作 开始 时 触发 。 


e event 类 型 : Event 

e ui 类 型 : Object 
o element 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 要 被 调整 尺寸 的 元 素 。 
o helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 调整 尺寸 的 助手 


(helper) 。 
o originalElement 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 包 衷 之 前 的 原 
始 元 素 。 


o originalPosition 类 型 : Object 描述 : resizable 调整 前 的 位 置 ， 表 示 为 
{ top, left } 。 

o originalSize 类 型 : Object 描述 : resizable 调整 前 的 尺寸 ， 表 示 为 
{ width, height } 。 


o position 类 型 : Object 描述 : 当前 位 置 ， 
o Size 类 型 : Object 描述 : 当前 位 置 ， 
代码 实例 : 


初始 化 带 有 指定 start 回调 的 resizable : 


$( ".selector" ).resizable({ 
start: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 resizestart 事件 : 


$( ".selector" ).on( "resizestart", 


stop( event, ui ) 
描述 : 当 调 整 尺寸 操作 停止 


e event 类 型 : Event 
e ui 类 型 : Object 


resizestop 


表示 为 { top, left } 。 
表示 为 ( width, height } 。 


function( event, ui ) {} ); 


o element 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 要 被 调整 尺寸 的 元 素 。 
o helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 调整 尺寸 的 助手 


(helper) 。 


o originalElement 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 包 训 之 前 的 原 


始 元 素 。 


o originalPosition 类 型 : Object 描述 : 


{ top, left } 。 
o originalSize 类 型 : Object 描述 : 
{ width, height } 。 
o position 类 型 : Object 描述 
o size 类 型 Object 描述 : 当前 位 置 


代码 实例 : 
初始 化 带 有 指定 stop 回调 的 resizable : 


$( ".selector" ).resizable({ 
stop: function( event, ui ) {} 


3): 


BRE — SBF 5 T2521] resizestop 事件 : 


resizable 调整 


resizable 调整 前 的 位 置 ， 表 示 为 


前 的 尺寸 ， 表 示 为 


: 当前 位 置 ， 表 示 为 { top, left } 。 


， 表 示 为 ( width, height } 。 


$( ".selector" ).on( "resizestop", function( event, ui ) {} ); 


实例 
一 个 简单 的 jQuery Ul 可 调整 尺寸 小 部 件 (Resizable Widget) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 调整 尺寸 小 部 件 (Resizable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#resizable { 
width: 100px; 
height: 100px; 
background: #ccc; 
} </style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="resizable"></div> 
<script> 
$( "#resizable" ).resizable(); 


«/script» 


«/body» 
«/html» 


国体 





jQuery UI API - 可 选择 小 部 件 (Selectable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 使 用 鼠标 选择 单个 元 素 或 一 组 元 素 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : jQuery UI 可 选择 (Selectable) 插件 允许 通过 鼠标 拖 搜 选择 元 素 (有 时 被 称 
为 一 个 套 索 ) 。 可 以 在 按 住 ctrl/meta 键 的 同时 单 击 或 拖 动 来 选择 多 个 (不 连续 的 ) 
元 素 。 


附加 说 明 : 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 
定义 的 主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


快速 导航 


选项 


appendToautoRefreshcanceldelaydisableddistancefiltertolerance | destroydisab 


appendTo 

i 8! : Selector 

描述 : 选择 助手 (BR) 要 被 添加 到 哪 一 个 元 素 。 
代码 实例 : 


初始 化 带 有 指定 appendro 选项 的 draggable : 


$( ".selector" ).selectable({ appendTo: "#someElem" }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 





// getter 

var appendTo = $( ".selector" ).selectable( "option", "appendTo" ), 

// setter 

$( ".selector" ).selectable( "option", "appendTo", "#someElem" ); 
‘| — gh 
默认 值 : "body" 
autoRefresh 


类 型 : Boolean 

描述 : 该 选项 决定 是 否 在 每 个 选择 操作 的 开始 时 更 新 (重新 计算 ) 每 个 选择 项 的 位 

置 和 尺寸 。 如 果 您 有 多 个 项 目 ， 您 可 能 要 设置 该 选项 为 false， 并 手动 调用 
[refresh()](#method-refresh) 方法 。 

代码 实例 : 


初始 化 带 有 指定 autoRefresh 选项 的 draggable : 


$( ".selector" ).selectable({ autoRefresh: false }); 


在 初始 化 后 ， 获 取 或 设置 autoRefresh 选项 : 


// getter 
var autoRefresh = $( ".selector" ).selectable( "option", "autoRefre 


// setter 
$( ".selector" ).selectable( "option", "autoRefresh", false ); 


LEN - 


默认 值 : true 





cancel 

类 型 : Selector 

描述 : 防止 从 匹配 选择 器 的 元 素 上 开始 选择 。 
代码 实例 : 


初始 化 带 有 指定 cancel 选项 的 selectable : 


$( ".selector" ).selectable({ cancel: "a,.cancel" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).selectable( "option", "cancel" ); 


// setter 
$( ".selector" ).selectable( "option", "cancel", "a,.cancel" ); 


默认 值 : "input, textarea, button, select, option" 


delay 
类 型 : Number 


描述 : 鼠标 按 下 后 直到 选择 开始 的 时 间 ， 以 宫 秒 计 。 该 选项 可 以 防止 点 击 在 有 录 个 元 
素 上 时 不 必要 的 选择 。 


代码 实例 : 
初始 化 带 有 指定 delay 选项 的 selectable : 


$( ".selector" ).selectable({ delay: 150 3); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).selectable( "option", "delay" ); 


// setter 
$( ".selector" ).selectable( "option", "delay", 150 ); 


默认 值 : 0 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 selectable。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 selectable : 


$( ".selector" ).selectable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).selectable( "option", "disabled" ), 


// setter 
$( ".selector" ).selectable( "option", "disabled", true ); 


«| gii 





默认 值 : false 


distance 
类 型 : Number 


描述 : 鼠标 按 下 后 选择 开始 前 必须 移动 的 距离 ， 以 像素 计 。 如 果 指 定 了 该 选项 ， 选 
择 只 有 在 鼠标 拖 搜 超出 指定 距离 时 才 会 开始 。 该 选项 可 以 防止 点 击 在 某 个 元 素 上 时 
不 必要 的 选择 。 


代码 实例 : 


初始 化 带 有 指定 distance 选项 的 selectable : 


$( ".selector" ).selectable({ distance: 30 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).selectable( "option", "distance" ), 


// setter 
$( ".selector" ).selectable( "option", "distance", 30 ); 


Aoo: .-—- 
默认 值 : 0 





filter 

类 型 : Selector 

描述 : 要 制作 选择 项 (可 被 选择 的 ) 的 匹配 的 子 元 素 。 
代码 实例 : 


初始 化 带 有 指定 filter 选项 的 selectable : 


$( ".selector" ).selectable({ filter: "li" }); 


在 初始 化 后 ， 获 取 或 设置 filter 选项 : 


// getter 
Var filter = $( "selector" )-selectable( "option", "filter" ); 


// setter 
$( ".selector" ).selectable( "option", "filter", "li" ); 


默认 值 : "nx" 


tolerance 
类 型 : String 
描述 : 指定 用 于 测试 套 索 是 否 选择 一 个 项 目的 模式 。 可 能 的 值 : 


e "fit" : BRE AEAEE. 
e "touch" :BRBéEmBtl, THAE T, 


代码 实例 : 


初始 化 带 有 指定 tolerance 选项 的 selectable : 


$( ".selector" ).selectable({ tolerance: "fit" }); 


在 初始 化 后 ， 获 取 或 设置 tolerance 选项 : 


// getter 
var tolerance = $( ".selector" ).selectable( "option", "tolerance" 


// setter 
$( ".selector" ).selectable( "option", "tolerance", "fit" ); 


默认 值 : "touch" 


方法 





destroy() 


类 型 : jQuery (plugin only) 

描述 : 完全 移 除 selectable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).selectable( "destroy" ); 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 selectable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).selectable( "disable" ) 


enable() 
类 型 : jQuery (plugin only) 
描述 : FA selectable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).selectable( "enable" ) 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 


代码 实例 : 
调用 该 方法 : 


var isDisabled = $( ".selector" ).selectable( "option", "disabled" 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 selectable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).selectable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 selectable 选项 的 值 。 


e optionName 类 型 : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).selectable( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 selectable 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value 对 。 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).selectable( "option", { disabled: true } ); 


refresh() 


类 型 : jQuery (plugin only) 


描述 : 更 新 每 个 选择 项 元 素 的 位 置 和 尺寸 。 当 
[autoRefresh](#option-autoRefresh) 选项 被 设置 为 false 时 ， 该 方法 可 用 于 
手动 重新 计算 每 个 选择 项 的 位 置 和 尺寸 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refresh 方法 : 


$( ".selector" ).selectable( "refresh" ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 selectable 元 素 的 jQuery WR, 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).selectable( "widget" ); 


事件 


create( event, ui ) 


类 型 : selectablecreate 
描述 : 当 selectable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 


初始 化 带 有 指定 create 回调 的 selectable : 


$( ".selector" ).selectable({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 selectablecreate 事件 : 


$( ".selector" ).on( "selectablecreate", function( event, ui ) {} | 
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selected( event, ui ) 


类 型 : selectableselected 
描述 : 当 每 个 元 素 被 添加 选择 时 ， 在 选择 操作 结尾 触发 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o selected 类 型 : Element 描述 : 被 选择 的 可 选择 项 目 。 
代码 实例 : 
初始 化 带 有 指定 selected 回调 的 selectable : 


$( ".selector" ).selectable({ 
selected: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 selectableselected 事件 : 


$( ".selector" ).on( "selectableselected", function( event, ui ) (. 
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selecting( event, ui ) 


类 型 : selectableselecting 
描述 : 当 每 个 元 素 被 添加 选择 时 ， 在 选择 操作 期 间 触发 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o selecting 类 型 : Element 描述 : 正 被 选择 的 当前 可 选择 项 目 。 
代码 实例 : 


初始 化 带 有 指定 selecting 回调 的 selectable : 


$( ".selector" ).selectable({ 
selecting: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 selectableselecting 事件 : 


$( ".selector" ).on( "selectableselecting", function( event, ui ) = 
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start( event, ui ) 


类 型 : selectablestart 
描述 : 在 选择 操作 开头 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 start 回调 的 selectable : 


$( ".selector" ).selectable({ 
start: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 selectablestart 事件 : 


$( ".selector" ).on( "selectablestart", function( event, ui ) {} ), 
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stop( event, ui ) 
类 型 : selectablestop 


描述 : 在 选择 操作 结尾 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 


代码 实例 : 
初始 化 带 有 指定 stop 回调 的 selectable : 


$( ".selector" ).selectable({ 
stop: funetion( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 selectablestop 事件 : 


$( ".selector" ).on( "selectablestop", function( event, ui ) {} ); 


a Bil 
unselected( event, ui ) 


类 型 : selectableunselected 


e event 类 型 : Event 
e ui 类 型 : Object 
o unselected 类 型 : Element 描述 : 未 被 选择 的 可 选择 项 目 。 


代码 实例 : 
初始 化 带 有 指定 unselected 回调 的 selectable : 


$( ".selector" ).selectable({ 
unselected: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 selectableunselected 事件 : 


$( ".selector" ).on( "selectableunselected", function( event, ui ) 
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unselecting( event, ui ) 


类 型 : selectableunselecting 
描述 : 当 每 个 元 素 从 选择 中 被 移 除 时 ， 在 选择 操作 期 间 触 发 。 
e event 类 型 : Event 


e ui 类 型 : Object 
o unselecting 类 型 : Element 描述 : 正 未 被 选择 的 当前 可 选择 项 目 。 


N 


代码 实例 : 
初始 化 带 有 指定 unselecting 回调 的 selectable : 


$( ".selector" ).selectable({ 
unselecting: function( event, ui ) {} 


3): 


线 定 一 个 事件 监听 器 到 selectableunselecting 事件 : 


$( ".selector" ) ,on( "selectableunselecting", function( event, ui ` 
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实例 


一 个 简单 的 jQuery UI 可 选择 小 部 件 (Selectable Widget) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 选择 小 部 件 (Selectable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
#selectable .ui-selecting { 
background: #ccc; 
} 
#selectable .ui-selected { 
background: #999; 
} 
</style> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<ul id="selectable"> 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 
«li»Item 5«/li» 
«/ul» 


«script» 
$( "#selectable" ).selectable(); 
</script> 


</body> 
</html> 
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jQuery UI API - 可 排序 小 部 件 (Sortable 
Widget) 


所 属 类 别 


交互 (Interactions) 


用 法 
描述 : 使 用 鼠标 调整 列表 中 或 者 网 格 中 元 素 的 排序 。 
版 本 新 增 : 1.0 


依赖 : 


e Ul 核心 (UI Core) 
部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


注释 : jQuery UI 可 排序 (Sortable) 插件 让 被 选 元 素 通 过 鼠标 拖 搜 进行 排序 。 
注释 : 为 了 排序 表格 行 ， tbody 必须 是 可 排序 的 (sortable) ， 而 不 是 
table 。 


快速 导航 


append ToaxiscancelconnectWithcontainmentcursorcursorAtdelaydisableddistanc 


appendTo 

类 型 : jQuery 3 Element 或 Selector 或 String 

描述 : 当 拖 搜 时 ， 通 过 最 标 移动 的 助手 被 追加 到 哪里 〈 例 如 ， 解 决 overlap/zlndex 
问题 ) o 

支持 多 个 类 型 : 

jQuery : 一 个 jQuery 对 象 ， 包 含 助手 (helper) 要 追加 到 的 元 素 。 

Element : 要 追加 助手 (helper) 的 元 素 。 

Selector : 一 个 选择 器 ， 指 定 哪 个 元 素 要 追加 助手 (helper) 。 


String: 字符 串 "parent" 将 促使 助手 (helper) 成 为 sortable 项 目的 同 
级 。 


代码 实例 : 
初始 化 带 有 指定 appendTo 选项 的 sortable : 


$( ".selector" ).sortable({ appendTo: document.body }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 


// getter 
var appendTo = $( ".selector" ).sortable( "option", "appendTo" ); 


// setter 
$( ".selector" ).sortable( "option", "appendTo", document.body ); 
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默认 值 : "parent" 


axis 
类 型 : String 


描述 : 如 果 定 义 了 该 选项 ， 项 目 只 能 在 水 平 或 垂直 方向 上 被 拖 搜 。 可 能 的 
值 Ws) ; nn » 


代码 实例 : 


初始 化 带 有 指定 axis 选项 的 sortable : 


$( "selector" ).sortable({ axis: "x" }); 


在 初始 化 后 ， 获 取 或 设置 axis 选项 : 


// getter 
var axis = $( ".selector" ).sortable( "option", "axis" ); 


// setter 
$( ".selector" ).sortable( "option", "axis", "x" ); 


默认 值 : false 


cancel 
类 型 : Selector 


描述 : 防止 从 匹配 选择 器 的 元 素 上 开始 排序 。 


代码 实例 : 


初始 化 带 有 指定 cancel 选项 的 sortable : 


$( ".selector" ).sortable({ cancel: "a,button" }); 


在 初始 化 后 ， 获 取 或 设置 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).sortable( "option", "cancel" ); 


// setter 
$( ".selector" ).sortable( "option", "cancel", "a,button" ); 


默认 值 : "input, textarea, button, select, option" 


connectWith 
类 型 : Selector 


描述 : 列表 中 的 项 目 需 被 连接 的 其 他 sortable 元 素 的 选择 器 。 这 是 一 个 单 向 关系 ， 
如 果 您 想 要 项 目 被 双向 连接 ， 必 须 在 两 个 sortable 元 素 上 都 设置 connectwith 
选项 。 


代码 实例 : 


初始 化 带 有 指定 connectwith 选项 的 sortable : 


$( ".selector" ).sortable({ connectWith: "#shopping-cart" }); 


在 初始 化 后 ， 获 取 或 设置 connectwith 选项 : 


// getter 
var connectWith = $( ".selector" ).sortable( "option", "connectWitl 


// setter 
$( ".selector" ).sortable( "option", "connectWith", "#shopping-carit 
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默认 值 : false 





containment 


类 型 : Element 或 Selector 5% String 


描述 : 定义 拖 搜 时 ，sortable 项 目 被 约束 的 边界 。 


注释 : 为 containment 指定 的 元 素 必须 有 一 个 已 计算 的 宽度 和 高 度 (尽管 它 不 需要 
ext) 。 例 如 ， 如 果 您 有 float: left sortable 子 元 素 ， 并 指定 了 
containment: "parent" ， 请 确保 在 sortable/parent 容器 上 有 float: left 
, KMENE height: 0 ， 导 致 未 定义 的 行为 。 

支持 多 个 类 型 : 


e Element : 一 个 要 作为 容器 使 用 的 元 素 。 
e Selector : 一 个 选择 器 ， 指 定 一 个 要 作为 容器 使 用 的 元 素 。 
e String : 一 个 字符 串 ， 标 识 一 个 要 作为 容器 使 用 的 元 素 。 可 能 的 


值 : "parent" 、 "document" 、 "window" 。 
代码 实例 : 


初始 化 带 有 指定 containment 选项 的 sortable : 


$( ".selector" ).sortable({ containment: "parent" }); 


在 初始 化 后 ， 获 取 或 设置 containment 选项 : 


// getter 
var containment = $( ".selector" ).sortable( "option", "containment 


// setter 
$( ".selector" ).sortable( "option", "containment", "parent" ); 
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默认 值 : false 





cursor 

类 型 : String 

描述 : 定义 当 排序 时 被 显示 的 光标 。 
代码 实例 : 


初始 化 带 有 指定 cursor 选项 的 sortable : 


$( ".selector" ).sortable({ cursor: "move" }); 


在 初始 化 后 ， 获 取 或 设置 cursor 选项 : 


// getter 
var cursor = $( ".selector" ).sortable( "option", “cursor" ); 


// setter 


$( ".selector" ).sortable( "option", "cursor", "move" ); 


默认 值 : "auto" 


cursorAt 

类 型 : Object 

描述 : 移动 排序 元 素 或 助手 (helper) ， 这 样 光标 总 是 出 现 ， 以 便 从 相同 的 位 置 进 
行 拖 搜 。 坐 标 可 通过 一 个 或 两 个 键 的 组 合成 一 个 哈 希 给 

出 : { top, left, right, bottom } o 

代码 实例 : 


初始 化 带 有 指定 cursorAt 选项 的 sortable : 


$( ".selector" ).sortable({ cursorAt: { left: 5 ) }); 


在 初始 化 后 ， 获 取 或 设置 cursorAt 选项 : 


// getter 
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" ); 


// setter 
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } ); 
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默认 值 : false 


delay 
类 型 : Integer 


描述 : 鼠标 按 下 后 直到 排序 开始 的 时 间 ， 以 宫 秒 计 。 该 选项 可 以 防止 点 击 在 叶 个 元 
素 上 时 不 必要 的 拖 搜 。 


代码 实例 : 
初始 化 带 有 指定 delay 选项 的 sortable : 


$( ".selector" ).sortable({ delay: 150 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).sortable( "option", "delay" ); 


// setter 
$( ".selector" ).sortable( "option", "delay", 150 ); 


默认 值 : 0 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 sortable。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 sortable : 


$( ".selector" ).sortable({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).sortable( "option", "disabled" ); 


// setter 
$( ".selector" ).sortable( "option", "disabled", true ); 
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默认 值 : false 


distance 
类 型 : Number 


描述 : 鼠标 按 下 后 排序 开始 前 必须 移动 的 距离 ， 以 像素 计 。 如 果 指 定 了 该 选项 ， 排 
ea 该 选项 可 以 用 于 人 允许 在 一 个 手柄 内 的 
元 素 上 点 击 。 


代码 实例 : 


初始 化 带 有 指定 distance 选项 的 sortable : 


$( ".selector" ).sortable({ distance: 5 }); 


在 初始 化 后 ， 获 取 或 设置 distance 选项 : 


// getter 
var distance = $( ".selector" ).sortable( "option", "distance" ); 


// setter 
$( ".selector" ).sortable( "option", "distance", 5 ); 
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默认 值 : 1 


dropOnEmpty 


类 型 : Boolean 


描述 : 如 果 为 ”false ， 从 该 sortable 的 项 目 不 能 被 放置 在 空 连接 的 sortable 上 
(请 查看 [connectwith](#option-connectwith) 选项 ) o 


代码 实例 : 


初始 化 带 有 指定 droponEmpty 选项 的 sortable : 


$( ".selector" ).sortable({ dropOnEmpty: false }); 


在 初始 化 后 ， 获 取 或 设置 droponEmpty 选项 : 


// getter 
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpt: 


// setter 
$( ".selector" ).sortable( "option", "dropOnEmpty", false ); 
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默认 值 : true 





forceHelperSize 

类 型 : Boolean 

描述 : 如 果 为 true ， 强 制 助手 (helper) 有 一 个 尺寸 。 
代码 实例 : 


初始 化 带 有 指定 forceHelperSize 选项 的 sortable : 


$( ".selector" ).sortable({ forceHelperSize: true }); 


在 初始 化 后 ， 获 取 或 设置 forceHelperSize 选项 : 


// getter 
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHe 


// setter 
$( ".selector" ).sortable( "option", "forceHelperSize", true ); 
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默认 值 : false 





forcePlaceholderSize 

类 型 : Boolean 

描述 : 如 果 为 true ， 强 制 占 位 符 (placeholder) 有 一 个 尺寸 。 
代码 实例 : 


初始 化 带 有 指定 forcePlaceholderSize 选项 的 sortable : 


$( ".selector" ).sortable({ forcePlaceholderSize: true }); 


在 初始 化 后 ， 获 取 或 设置 forcePlaceholderSize 选项 : 


// getter 
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "f« 


// setter 
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true ` 





默认 值 : false 
grid 
类 型 : Array 


描述 : 对 齐 排 序 元 素 或 助手 (helper) 到 网 格 ， 每 个 x 和 y 像素 。 数 组 形式 必须 是 
[x yj]j。 


代码 实例 : 
初始 化 带 有 指定 grid 选项 的 sortable : 


$( ".selector" ).sortable({ grid: [ 20, 10 ] }); 


在 初始 化 后 ， 获 取 或 设置 grid 3& 


u 
= 


// getter 
var grid = $( ".selector" ).sortable( "option", "grid" ); 


// setter 
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] ); 


默认 值 : false 


handle 

类 型 : Selector 或 Element 

描述 : 如 果 指 定 了 该 选项 ， 则 限制 在 指定 的 元 素 上 开始 排序 。 
代码 实例 : 


初始 化 带 有 指定 handle 选项 的 sortable : 


$( ".selector" ).sortable({ handle: ".handle" }); 


在 初始 化 后 ， 获 取 或 设置 handle 选项 : 


// getter 
var handle = $( ".selector" ).sortable( "option", "handle" ); 


// setter 


$( ".selector" ).sortable( "option", "handle", ".handle" ); 


默认 值 : false 


helper 

类 型 : String 或 Function() 

描述 : 允许 一 个 helper 元 素 用 于 拖 搜 显 示 。 
支持 多 个 类 型 : 


e String : 如 果 设 置 为 "clone" ， 元 素 将 被 克隆 ， 且 克隆 将 被 拖 搜 。 


e Function : 一 个 画 数 ， 将 返回 拖 搜 时 要 使 用 的 DOMEIement。 男 数 接收 事 


件 ， 且 元 素 正 被 排序 。 
代码 实例 : 
初始 化 带 有 指定 helper 选项 的 sortable : 


$( ".selector" ).sortable({ helper: "clone" 3); 


在 初始 化 后 ， 获 取 或 设置 helper 选项 : 


// getter 
var helper = $( ".selector" ).sortable( "option", "helper" ); 


// setter 
$( ".selector" ).sortable( "option", "helper", "clone" ); 


默认 值 : "original" 


items 

类 型 : Selector 

描述 : 指定 元 素 内 的 哪 一 个 项 目 应 是 sortable。 
代码 实例 : 

初始 化 带 有 指定 items 选项 的 sortable : 


$( ".selector" ).sortable({ items: "&gt; li" }); 


在 初始 化 后 ， 获 取 或 设置 items 选项 : 


// getter 
var items = $( ".selector" ).sortable( "option", "items" ); 


// setter 
$( ".selector" ).sortable( "option", "items", "&gt; li" ); 


默认 值 : "> *" 


opacity 


类 型 : Number 


描述 : 当 排 序 时 助手 (helper) 的 不 透明 度 。 从 0.01 到 1. 
代码 实例 : 


初始 化 带 有 指定 opacity 选项 的 sortable : 


$( ".selector" ).sortable({ opacity: 0.5 }); 


在 初始 化 后 ， 获 取 或 设置 opacity 选项 : 


// getter 
var opacity = $( ".selector" ).sortable( "option", "opacity" ); 


// setter 


$( ".selector" ).sortable( "option", "opacity", 0.5 ); 


默认 值 : false 


placeholder 

类 型 : String 

描述 : 要 应 用 的 class 名 称 ， 否 则 为 白色 空白 。 
代码 实例 : 


初始 化 带 有 指定 placeholder 选项 的 sortable : 


$( ".selector" ).sortable({ placeholder: "sortable-placeholder" }), 





在 初始 化 后 ， 获 取 或 设置 placeholder 选项 : 


// getter 
var placeholder = $( ".selector" ).sortable( "option", "placeholde!: 


// setter 
$( ".selector" ).sortable( "option", "placeholder", "sortable-place 
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默认 值 : false 





revert 


类 型 : Boolean 或 Number 


描述 : sortable 项 目 是 否 使 用 一 个 流畅 的 动画 还 原 到 它 的 新 位 置 。 
支持 多 个 类 型 : 
e Boolean: 当 设 置 为 true ， 该 项 目 将 会 使 用 动画 ， 动 画 使 用 默认 的 持续 时 


间 。 
e Number : 动画 的 持续 时 间 ， 以 毫秒 计 。 
代码 实例 : 


初始 化 带 有 指定 revert 选项 的 sortable : 


$( ".selector" ).sortable({ revert: true }); 


在 初始 化 后 ， 获 取 或 设置 revert 选项 : 


// getter 
var revert = $( ".selector" ).sortable( "option", "revert" ); 


// setter 


$( ".selector" ).sortable( "option", "revert", true ); 


默认 值 : false 


scroll 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 当 到 达 边 缘 时 页 面 会 滚动 。 
代码 实例 : 


初始 化 带 有 指定 scroll 选项 的 sortable : 


$( ".selector" ).sortable({ scroll: false }); 


在 初始 化 后 ， 获 取 或 设置 scroll 选项 : 


// getter 
var scroll = $( ".selector" ).sortable( "option", "scroll" ); 


// setter 
$( ".selector" ).sortable( "option", "scroll", false ); 


默认 值 : true 


scrollSensitivity 

类 型 : Number 

描述 : 定义 鼠标 距离 边缘 多 少 距离 时 开始 滚动 。 
代码 实例 : 


初始 化 带 有 指定 scrollSensitivity 选项 的 sortable : 


$( ".selector" ).sortable({ scrollSensitivity: 10 }); 


在 初始 化 后 ， 获 取 或 设置 scrollSensitivity 选项 : 


// getter 
var scrollSensitivity = $( ".selector" ).sortable( "option", "scro- 


// setter 
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 ); 


| NETTES 
默认 值 : 20 





scrollSpeed 

类 型 : Number 

描述 : 当 鼠 标 指针 获取 到 在 
[scrollSensitivity](#option-scrollSensitivity) 距离 内 时 ， 窗 体 滚 动 的 

速度 。 如 果 scroll 选项 是 false 则 忽略 。 

代码 实例 : 


初始 化 带 有 指定 scrollspeed 选项 的 sortable : 


$( ".selector" ).sortable({ scrollSpeed: 40 }); 


在 初始 化 后 ， 获 取 或 设置 scrollSpeed 选项 : 


// getter 
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeec 


// setter 
$( ".selector" ).sortable( "option", "scrollSpeed", 40 ); 
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默认 值 : 20 


tolerance 
类 型 : String 
描述 : 指定 用 于 测试 项 目 被 移动 时 是 否 履 盖 在 另 一 个 项 目 上 的 模式 。 可 能 的 值 : 


e "intersect" : 项 目 至 少 50% € & TER (hm B.E. 
e "pointer" : 鼠标 指针 重 亚 在 其 他 项 目 上 。 


代码 实例 : 


初始 化 带 有 指定 tolerance 选项 的 sortable : 


$( ".selector" ).sortable({ tolerance: "pointer" }); 


在 初始 化 后 ， 获 取 或 设置 tolerance 选项 : 


// getter 
var tolerance = $( ".selector" ).sortable( "option", "tolerance" ), 


// setter 
$( ".selector" ).sortable( "option", "tolerance", "pointer" ); 


aL =: 


默认 值 : "intersect" 





zlndex 

类 型 : Integer 

描述 : 当 被 排序 时 ， 元 素 / 助 手 (helper) 的 Z-index。 
代码 实例 : 


初始 化 带 有 指定 zIndex 选项 的 sortable : 


$( ".selector" ).sortable({ zIndex: 9999 }); 


在 初始 化 后 ， 获 取 或 设置 zIndex 选项 : 


// getter 
var zIndex = $( ".selector" ).sortable( "option", "zIndex" ); 


// setter 
$( ".selector" ).sortable( "option", "zIndex", 9999 ); 


默认 值 : 1000 
方法 
cancel() 


类 型 : jQuery (plugin only) 


描述 : 当前 排序 开始 时 ， 取 消 一 个 在 当前 sortable 中 的 改变 ， 且 恢复 到 之 前 的 状 
态 。 在 stop 和 receive 回调 画 数 中 非常 有 用 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 cancel 方法 : 


$( ".selector" ).sortable( "cancel" ) 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 sortable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).sortable( "destroy" ) 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 sortable. 

。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).sortable( "disable" ); 


enable() 
类 型 : jQuery (plugin only) 
描述 : FA sortable. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).sortable( "enable" ); 


option( optionName ) 
i 8! : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName X # : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 
var isDisabled = $( ".selector" ).sortable( "option", "disabled" ), 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 draggable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).sortable( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 sortable 选项 的 值 。 


e optionName X Z! : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).sortable( "option", "disabled", true ) 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 sortable 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).sortable( "option", { disabled: true } ); 


refresh() 


类 型 : jQuery (plugin only) 


描述 : 刷新 sortable 项 目 。 触 发 所 有 sortable 项 目 重 新 加 载 ， 导致 新 的 项 目 被 认 
Ay, 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refresh 方法 : 


$( ".selector" ).sortable( "refresh" ); 


refreshPositions() 


类 型 : jQuery (plugin only) 


描述 : 刷新 sortable 项 目的 缓存 位 置 。 调 用 该 方法 刷新 所 有 sortable 的 已 缓存 的 项 
目 位 置 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refreshPositions 方法 : 


$( ".selector" ).sortable( "refreshPositions" ); 


serialize( options ) 
X 8! : String 


描述 : 序列 化 sortable 的 项 目 id 为 一 个 form/ajax 可 提交 的 字符 串 。 调 用 该 方 
法 会 产生 一 个 可 被 追加 到 任何 url 中 的 哈 希 ， 以 便 简 单 地 把 一 个 新 的 项 目 顺 序 提交 
回 服务 器 。 


默认 情况 下 ， 它 通过 每 个 项 目的 id 进行 工作 ，id 格式 为 
"setname number" ， 且 它 会 产生 一 个 形 如 
"setname[]=number&setname[]=number" 的 哈 希 。 


注释 : 如 果 序 列 化 返回 一 个 空 的 字符 串 ， 请 确认 id 属性 包含 一 个 下 划 线 () 。 
形式 必须 是 "set_number"”。 例 如 ， 一 个 id 属性 为 

"foo 1". "foo 5" 、 "foo 2" 的 3 元 素 列 表 将 序列 化 为 
"foo[]=1&foo[]=5&foo[]=2”。 您 可 以 使 用 下 划 线 () 、 等 号 (=) 或 连 字符 
(-) 来 分 隔 集合 和 数字 。 例 如 ， "foo=1" 、 "foo-1" 、 "foo_1" 所 有 都 序列 
化 为 "foo[]-1" . 


e options 类 型 : Object 要 自 定义 序列 化 的 选项 。 
o key (默认 值 : 属性 中 分 隔 符 前 面 的 部 分 ) 类 型 : String 描述 : 把 
parti[] 替换 为 指定 的 值 。 
o attribute (默认 值 : "id" ) 类 型 String 描述 : 值 要 使 用 的 属性 名 称 。 
o expression (默认 值 : /(.+)[-=_](.+)/ ) 类 型 : RegExp 描述 : 用 
于 把 属性 值 分 隔 为 键 和 值 两 部 分 的 正则 表达 式 。 


代码 实例 : 
调用 serialize 方法 : 


var sorted = $( ".selector" ).sortable( "Serialize", ( key: "sort" 
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toArray( options ) 
类 型 : Array 
描述 : 序列 化 sortable 的 项 目 id 为 一 个 字符 串 的 数组 。 


e options 类 型 : Object 要 自 定义 序列 化 的 选项 。 
o attribute (默认 值 : "id" ) 类 型 String 描述 : 值 要 使 用 的 属性 名 称 。 


代码 实例 : 
调用 toArray 方法 : 


var sortedIDs = $( ".selector" ).sortable( "toArray" ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 sortable 元 素 的 jQuery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).sortable( "widget" ); 


事件 


activate( event, ui ) 


类 型 : sortactivate 
描述 : 当 使 用 被 连接 列表 时 触发 该 事件 ， 每 个 被 连接 列表 在 拖 搜 开始 时 接收 它 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o ja = : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
< con, left f=. 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 


Atop lert ri, 
o sender 类 型 ; jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o pec 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 activate 回调 的 sortable : 


$( ".selector" ).sortable({ 
activate: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 sortactivate 事件 : 


$( ".selector" ) .on( "sortactivate", function( event, ui ) {} ); 


beforeStop( event, ui ) 


类 型 : sortbeforestop 


描述 : 当 排 序 停 止 时 触发 该 事件 ， 除 了 当 占 位 符 (placeholder) /助手 (helper) 13 
然 可 用 时 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o hepar : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 3: £ : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
(foODLUee 用。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 ; jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 beforeStop 回调 的 sortable : 


$( ".selector" ).sortable({ 
beforeStop: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 sortbeforestop 事件 : 


$( ".selector™ ).on( "sortbeforestop", function( event, ui ) {} ); 
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change( event, ui ) 


类 型 : sortchange 
描述 : 在 排序 期 间 触 发 该 事件 ， 除 了 当 DOM 位 置 改变 时 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o pound 25 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o Bu 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 change 回调 的 sortable : 


$( ".selector" ).sortable({ 
change: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 sortchange 事件 : 


$( "selector" ).on( "sortchange", function( event, ux ) {} ); 


create( event, ui ) 


X 8! : sortcreate 
描述 : 34 droppable 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 和 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 sortable : 


$( ".selector" ).sortable({ 
create: function( event, ui ) {} 


T) 


绑 定 一 个 事件 监听 器 到 sortcreate 事件 : 


$( "selector" ).on( "sortcreate", function( event, ui ) {} ); 


deactivate( event, ui ) 


类 型 : sortdeactivate 
描述 : 当 排 序 停 止 时 触发 该 事件 ， 该 事件 传播 到 所 有 可 能 的 连接 列表 。。 


e event 类 型 : Event 
e ui 类 型 : Object 
o pe Bor a : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) . 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : F (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
4 top, ett. 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o pecu 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 deactivate 回调 的 sortable : 


$( ".selector" ).sortable({ 
deactivate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortdeactivate 事件 : 


$( ".selector™ ) .on( "sortdeactivate", function( event, ui ) {} ); 
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out( event, ui ) 

X 8! : sortout 

描述 : 当 一 个 sortable 项 目 从 一 个 sortable 列表 移 除 时 触发 该 事件 。 
注释 : 当 一 个 sortable 项 目 被 撤销 时 也 会 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o p und m : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o Po o 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 out 回调 的 sortable : 


$( ".selector" ).sortable({ 
out: function( event, ux ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortout 事件 : 


$( ".selector™ ) .on( "sortout", fünction( event, ui ) {} ); 


over( event, ui ) 
类 型 : sortover 
描述 : 当 一 个 sortable 项 目 移动 到 一 个 sortable 列表 时 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o 人 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left}. 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o pcne 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 over 回调 的 sortable : 


$( ".selector" ).sortable({ 
out: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortover 事件 : 


$( ".selector" ).on( "sortout", function( event, ui ) {} ); 


receive( event, ui ) 


类 型 : sortreceive 


描述 : 当 来 自 一 个 连接 的 sortable 列表 的 一 个 项 目 被 放置 到 另 一 个 列表 时 触发 该 事 
件 。 后 者 是 事件 目标 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
(helper) 。 
o item X €! jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 


top alent, 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
4 top, left ri, 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left e. 
o sender 类 型 ; jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o B 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 receive 回调 的 sortable : 


$( ".selector" ).sortable({ 
receive: function( event, ui ) {} 


T): 


绑 定 一 个 事件 监听 器 到 sortreceive 事件 : 


$( ".selector" ).on( "sortreceive", function( event, ui ) {} ); 


remove( event, ui ) 


类 型 : sortremove 


描述 : 当 来 自 一 个 连接 的 sortable 列表 的 一 个 项 目 被 放置 到 另 一 个 列表 时 触发 该 事 
件 。 前 者 是 事件 目标 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o Due a : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o B 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 remove 回调 的 sortable : 


$( ".selector" ).sortable({ 
remove: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 sortremove 事件 : 


$( ".selector" ).on( "sortremove", function( event, ui ) {} ); 


sort( event, ui ) 
类 型 : sort 
描述 : 在 排序 期 间 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o ia as : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left Mi, 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
o sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o eer 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 sort 回调 的 sortable : 


$( ".selector" ).sortable({ 
sort: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 sort 事件 : 


$( selector ).on( "sort", function( event, ui ) {} ); 


start( event, ui ) 


类 型 : sortstart 
描述 : 当 排 序 开始 时 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o BAN F : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
ME efe) ev ed n A ON 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
o originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
4 top, Left } 
o sender 类 型 ; jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
o Bp no 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 start 回调 的 sortable : 


$( ".selector" ).sortable({ 
start: function( event, ui ) {} 


1) 


绑 定 一 个 事件 监听 器 到 sortstart 事件 : 


$( ".selector" ).on( "sortstart", function( event, ui ) {} ); 


stop( event, ui ) 


类 型 : sortstop 
描述 : 当 排 序 停止 时 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o aed er : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
helper) 。 
o item 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 
{ top, left } 。 
o position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
top, lert ri, 


Oo 


o 


o 


originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable, 
B 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 stop 回调 的 sortable : 


$( ".selector" ).sortable( { 


stop: 


}); 


function( event, ui ) {} 


BRXE — “SBF 5 T2521 sortstop 事件 : 


$( ".selector" ).on( "sortstop", function( event, ui ) {} ); 


update( event, ui ) 


类 型 : sortupdate 
描述 : 当 用 户 停止 排序 且 DOM 位 置 改 变 时 触发 该 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 


o 


helper 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 排序 的 助手 
(helper) 。 


o item X €! jQuery 描述 : jQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offset 类 型 : Object 描述 : F (helper) 的 当前 的 绝对 位 置 ， 表 示 为 


{ top, Left}. 
position 类 型 : Object 描述 : 助手 (helper) 的 当前 位 置 ， 表 示 为 
{ top, left } 。 
originalPosition 类 型 : Object 描述 : 元 素 的 原始 位 置 ， 表 示 为 
{ top, left } 。 
sender 类 型 : jQuery 描述 : 如 果 从 一 个 sortable 移动 到 另 一 个 
sortable， 项 目 来 自 的 那个 sortable。 
BE Oe 类 型 : jQuery 描述 : jQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 
元 素 。 


代码 实例 : 
初始 化 带 有 指定 update 回调 的 sortable : 


$( ".selector" ).sortable({ 
update: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortupdate 事件 : 


$( ".selector" ).on( "sortupdate", function( event, ui ) {} ); 


实例 
一 个 简单 的 jQuery Ul 可 排序 小 部 件 (Sortable Widget) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 可 排序 小 部 件 (Sortable Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<ul id="sortable"> 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 
«li»Item 5«/li» 
«/ul» 


<script>$("#sortable").sortable();</script> 


</body> 
</html> 


加 ER 





jQuery UI API X 别 - FAR (Method 


Overrides) 


jQuery Ul 重 载 了 几 个 内 置 的 jQuery 方法 ， 以 提供 额外 的 功能 。 当 使 用 这 些 重 载 


时 ， 确 保 加 载 jQuery Ul 是 很 重要 的 。 如 果 jQuery Ul 未 加 载 ， 


预期 的 功能 将 不 可 用 ， 


API 


.addClass() 


.focus() 


hide() 


.position() 


.removeClass() 


.Show() 


.toggle() 


.toggleClass() 


这 会 导致 难以 追踪 的 错误 。 


B 


一 


iach 


M AERA A t, 7 ERRA 
内 的 每 个 元 素 添 加 指定 的 Class. 


异步 聚焦 到 一 个 元 素 。 


使 用 自 定义 效果 来 隐藏 匹配 的 元 素 。 


相对 另 一 个 元 素 定 位 一 个 元 素 。 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 
内 的 每 个 元 素 移 除 指定 的 Class。 


使 用 自 定 义 效果 来 显示 匹配 的 元 素 。 


使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 


71*0 


当 动 画 样 式 改 变 时 ， 根 据 Class BBE 
在 以 及 switch 参数 的 值 ， 为 匹配 的 元 
素 集合 内 的 每 个 元 素 添加 或 移 除 一 个 或 


多 个 Class。 


方法 依然 存在 ， 但 


也 属于 类 别 


特效 (Effects) | 
特效 核心 
(Effects Core) 


方法 (Method) | 
Ul 核心 (UI 
Core) 


特效 (Effects) | 
特效 核心 
(Effects Core) 

| 方法 (Method) 


方法 (Method) | 
实用 工具 
(Utilities ) 


特效 (Effects) | 
特效 核心 
(Effects Core) 


特效 (Effects) | 
特效 核心 
(Effects Core) 

| 方法 (Method) 


特效 (Effects) | 
特效 核心 
(Effects Core) 

| 方法 (Method) 


特效 (Effects) | 
特效 核心 
(Effects Core) 


jQuery UI API - .focus() 


所 属 类 别 
方法 重 载 (Method Overrides) | 方法 (Methods) | UI 核心 (UI Core) 
用 法 


描述 : 异步 聚焦 到 一 个 元 素 。 


返回 : jQuery 


.focus( delay [, callback |] )Returns: jQuery 


参数 类 型 描述 
delay Integer 聚焦 前 等 待 的 毫秒 数 。 
callback Function() 元 素 被 聚焦 后 要 调用 的 函数 。 


该 插件 扩展 自 jQuery AEH .focus() 方法 。 如 果 jQuery Ul 未 加 载 ， 调 用 


.focus() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 期 
的 行为 。 


jQuery UI API - .position() 


所 属 类 别 


方法 重 载 (Method Overrides) | 方法 (Methods) | 实用 工具 (Utilities) 


用 法 


描述 : 相对 另 一 个 元 素 定位 一 个 元 素 。 


返回 : jQuery 
版 本 新 增 : 1.8 


.position( options ) 


参数 


| 


描 ; 


$H 
Ef 


options Object 


my (默认 值 : "center" ) 类 型 String 描述 : 定义 被 定位 元 素 上 对 准 目标 
元 素 的 位 置 : "horizontal vertical" 对 齐 方式 。 一 个 单一 的 值 ， 上 比如 "right" 将 规 
范 为 "right center", "top" 将 规范 为 "center top" (下面 的 CSS 公约 ) 。 可 接 
受 的 水 平 值 : "left"、"center"、"right"。 可 接受 的 垂直 
值 : "top"、"center"、"bottom"。 例 如 ，"left top" 或 "center center"。 每 个 纬度 
也 可 以 包含 偏 移 ， 以 像素 计 或 以 百分比 计 ， 例 如 "right+10 top-25%"。 百 分 比 
偏 移 是 相对 于 被 定位 的 元 素 。 
at (默认 值 "center" ) 类 型 String 描述 : 定义 目标 元 素 上 对 准 被 定位 元 
素 的 位 置 : "horizontal vertical" 对 齐 方 式 。 如 需 了 解 更 多 细节 请 查看 my 选项 
上 的 可 能 值 。 百 分 比 偏 移 是 相对 于 目标 元 素 。 
of (默认 值 : null) 类 型 Selector 或 Element 3 jQuery 或 Event 描述 : 
要 定位 的 元 素 。 如 果 您 提供 一 个 选择 器 (Selector) 或 jQuery 对 象 ， 将 使 用 第 
一 个 匹配 元 素 。 如 果 您 提供 一 个 事件 (Event) 对 象 ， 将 使 用 pageX 和 pageY 
属性 ， 例 如 "#top-menu". 
collision (默认 值 : "flip" ) 类 型 String 描述 : 当 被 定位 元 素 在 某 些 方 
向 上 浴 出 窗口 ， 则 移动 它 到 另 一 个 位 置 。 与 my 和 at 选项 相似 ， 该 选项 会 接受 
一 个 单一 的 值 或 一 对 horizontal/vertical 值 。 例 如 : "flip", "fit", "fit flip", "fit 
none", 

o "flip" : 翻转 元 素 到 目标 的 相对 一 边 ， 再 次 运行 collision 检测 一 表 查 看 元 素 

是 否 适合 。 无 论 哪 一 边 人 允许 更 多 的 元 素 可 见 ， 则 使 用 那 一 边 。 
o "fit" : 把 元 素 从 窗口 的 边缘 移 开 。 
o "flipfit" : 首先 应 用 flip 逻辑 ， 把 元 素 放 置 在 允许 更 多 元 素 可 见 的 那 一 边 。 
然后 应 用 代 逮 和 辑 ， 确 保 尽 可 能 多 的 元 素 可 见 。 


o "none" : 不 应 用 任何 collision 检测 。 

e using (默认 值 : null) 类 型 : Function() 描述 : 当 指定 了 该 选项 ， 实 际 属 
性 设置 则 委托 给 该 回调 。 接 受 两 个 参数 : 第 一 个 是 位 置 top 和 left 值 的 哈 希 ， 
可 被 转发 到 .css() 或 .animate() ; 第 二 个 提供 了 关于 两 个 元 素 的 位 置 和 尺寸 的 
反馈 ， 同 时 也 计算 它们 的 相对 位 置 。target 和 element 都 有 下 列 属性 : 
element, left, top. width, height, 另外 ， 还 有 horizontal, vertical 和 
important， 提 供 了 十 二 个 可 能 的 方向 ， 如 ( horizontal: "center", vertical: "left", 
important: "horizontal" }。 

e within (默认 值 : window ) 类 型 : Selector 或 Element 或 jQuery 描述 : 元 
素 定 位 为 within， 会 影响 collision 检测 。 如 果 您 提供 了 一 个 选择 器 

(Selector) 或 jQuery 对 象 ， 则 使 用 第 一 NERS. 


jQuery UI .position() 方法 允许 您 相对 窗 体 (window) 、 文 档 、 另 一 个 元 素 或 
ps ey /鼠标 (mouse) 来 定位 一 个 元 素 ， 无 需 考 外 相对 父 元 素 的 偏 移 
offset) 。 


注释 : jQuery Ul 不 支持 定位 隐藏 元 素 。 
这 是 一 个 独立 的 jQuery 插件 ， 且 对 其 他 jQuery UI 组 件 没有 依赖 关系 。 


该 插件 扩展 自 jQuery AEH position) 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 
.position() 方法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 
预期 的 行为 。 


实例 
一 个 简单 的 jQuery Ul 定位 (Position) 实例 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>.position() 实例 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
.positionDiv { 
position: absolute; 
width: 75px; 
height: 75px; 
background: green; 


} 
</style> 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id="targetElement"> 
<div class="positionDiv" id="position1"></div> 
<div class="positionDiv" id="position2"></div> 


<div class="positionDiv" id="position3"></div> 
<div class="positionDiv" id="position4"></div> 
</div> 


<script> 

$( "#position1" ).position({ 
my: "center", 
at: "center", 
of: "#targetElement" 


3); 


$( "#position2" ).position({ 
my: "left top", 
at: "left top", 
of: "#targetElement" 


3); 


$( "#position3" ).position({ 
my: "right center", 
at: "right bottom", 
of: "#targetElement" 


3); 


$( document ).mousemove(function( event ) ( 
$( "#position4" ).position({ 
my: "left+3 bottom-3", 
of: event, 
collection iit 
3); 
3); 


«/script» 


«/body» 
«/html» 


E —————————————————H———Á 





W3School jQuery Ul 教程 


jQuery UI API 类 别 -方法 (Methods) 


尽管 jQuery Ul 主要 由 小 部 件 (Widgets) . 2H (Interactions) 和 特效 
(Effects) 组 成 ， 但 是 还 有 一 些 简 单 的 方法 ， 增 加 了 便利 性 。 
API 描述 


禁用 选择 匹配 的 元 
素 集合 内 的 文本 内 


Fo 


对 一 个 元 素 应 用 动 
画 特效 。 


启用 选择 匹配 的 元 


RT X x 


.disableSelection() UI 核心 (UI Core) 


特效 (Effects) | 特效 核心 


.effect() (Effects Core) 


.enableSelection() UI 核心 (UI Core) 


E 方法 重 载 (Method Overrides) 
0 EJ Ul 核心 (UI Core) 


特效 (Effects) | 特效 核心 


使 用 自 定义 效果 来 A | 
.hide() E = (Effects Core) | 方法 重 载 
隐藏 匹配 的 元 素 。 (Method Overrides) 
相对 另 一 个 元 素 定 HÆ (Method Overrides) 
Ponien 位 一 个 元 素 。 实用 工具 (Utilities) 
为 匹配 的 元 素 集合 
removeUniqueld() ， 移 除 由 .uniqueld() UI 核心 (UI Core) 
设置 的 |d。 
.scrollParent() m PUT UI 核心 (UI Core) 
— 特效 (Effects) | 特效 核心 
.show() ERE RR (Effects Core) | 方法 重 载 
Tom iris (Method Overrides) 
使 用 自 定义 效果 来 特效 (Effects) | 特效 核心 
.toggle() 显示 或 隐藏 匹配 的 (Effects Core) | AER 
元 素 。 (Method Overrides) 
为 匹配 的 元 素 集 合 
.Uniqueld() 生成 并 申请 一 个 唯 UI 核心 (UI Core) 
一 的 Id. 
.zlndex() Ai = Ul 核心 (UI Core) 


jQuery UI API X 3| - 方法 (Methods) 


jQuery UI API - .disableSelection() 


所 属 类 别 


方法 (Methods) | UI 核心 (Ul Core) 


用 法 

描述 : 禁用 选择 匹配 的 元 素 集 合 内 的 文本 内 容 。 
返回 : jQuery 

版 本 新 增 : 1.6 

版 本 废弃 : 1.9 


.disableSelection() 


该 方法 不 接受 任何 参数 。 
茶 用 的 文本 选择 是 有 害 的 ， 不 建议 使 用 。 


jQuery UI API - .enableSelection() 


所 属 类 别 


方法 (Methods) | UI 核心 (Ul Core) 


用 法 

描述 : 启用 选择 匹配 的 元 素 集合 内 的 文本 内 容 。 
返回 : jQuery 

版 本 新 增 : 1.6 

版 本 废弃 : 1.9 


.enableSelection() 


该 方法 不 接受 任何 参数 。 


.enableselection() 方法 可 用 于 启用 通过 
[.disableSelection()](api-disableSelection.html) 


茶 用 的 文本 选择 。 


jQuery UI API - .removeUniqueld() 


所 属 类 别 


方法 (Methods) | UI 核心 (Ul Core) 


用 法 
描述 : 为 匹配 的 元 素 集 合 移 除 由 .uniqueld() 设置 的 Id, 
返回 : jQuery 


版 本 新 增 : 1.9 


. removeUniqueld() 


该 方法 不 接受 任何 参数 。 


.removeUniqueId() 移 除 由 [.uniquerd()](api-uniqueId.html) 设置 的 
id。 在 未 使 用 .uniqueId() 设置 id 的 元 素 上 调用 .removeUniqueId() 则 无 影 
响 ， 即 使 该 元 素 有 一 个 id。 


jQuery UI API - .scrollParent() 


所 属 类 别 


方法 (Methods) | UI 核心 (UI Core) 


用 法 
描述 : 获取 最 近 的 可 滚动 的 祖先 。 


返回 : jQuery 


.scrollParent() 


该 方法 不 接受 任何 参数 。 


该 方法 查找 最 近 的 可 滚动 的 祖先 。 换 名 话说， .scrollParent() 查找 当前 所 选 元 
素 在 其 内 滚动 的 元 素 。 


该 方法 只 在 包含 一 个 元 素 的 jQuery 对 象 上 工作 。 


jQuery UI API - .uniqueld() 


所 属 类 别 


方法 (Methods) | UI 核心 (UI Core) 


用 法 

描述 : 为 匹配 的 元 素 集合 生成 并 申请 一 个 唯一 的 Id. 
返回 : jQuery 

版 本 新 增 : 1.9 


.uniqueId() 


该 方法 不 接受 任何 参数 。 


许多 小 部 件 需要 元 素 生成 唯一 的 id。 .uniqueId() 会 检查 元 素 是 否 有 id, MRT 
素 没 有 id， 它 将 生成 一 个 id， 并 设置 为 该 元 素 的 id。 在 未 检查 元 素 是 否 具 有 id 就 
调用 .uniquerd() 是 安全 的 。 当 小 部 件 使 用 后 需要 清除 ， 如 果 id 是 通过 
.ÜuniqueId() 添加 的 ， [.removeUniqueId()](api-removeUniqueId.html) 
方法 将 从 元 素 上 移 除 jd， 如果 id 不 是 通过 .uniqueId() 添加 的 ， 则 无 影 

响 。 .removeUniqueId() 之 所 以 能 区 分 id， 是 因为 .uniqueId() 生成 的 id # 
有 前 级 "ui-id-" 。 


jQuery UI API - .zindex() 


所 属 类 别 


方法 (Methods) | Ul 核心 (UI Core) 


.zindex() 用 法 


描述 : 为 元 素 获 取 z-index。 
返回 : jQuery 


.ZIndex() 


该 方法 不 接受 任何 参数 。 


.zIndex() 方法 在 查找 一 个 元 素 的 z-index 时 非常 有 用 ， 忽 略 z-index 是 否 是 直 
接 设 置 在 元 素 上 还 是 设置 在 祖先 元 素 上 。 为 了 确定 z-index， 该 方法 会 在 指定 的 元 
素 上 开始 ， 且 会 治 着 DOM 查找 ， 直 到 找到 一 个 带 有 z-index 的 已 定位 的 元 素 。 如 
果 未 找到 这 样 的 元 素 ， 该 方法 将 返回 一 个 o fA. 

该 方法 假设 带 有 铸 套 z-index 的 元 素 不 带 有 一 个 o 值 的 z-index。 例 如 ， 给 出 下 
HAY DOM, Asics RY MA A z-index， 因 为 在 Internet Explorer 中 无 法 区 
分 一 个 © 显 式 值 和 无 值 。 


«div style="z-index: -10;"> 
<div style="z-index: 0;"></div> 
</div> 


.zindex( zindex ) 用 法 


描述 : 为 元 素 设 置 z-index。 
返回 : Integer 


.ZIndex( zIndex ) 


学 


参数 类 描 


zlndex Integer 要 设置 的 z-index. 


| 


这 相当 于 .css( "zIndex", zIndex ) 。 


jQuery UI API # 5 - 


API 
:data() Selector 


‘focusable 
Selector 


:tabbable 
Selector 


描述 


选择 器 (Selectors) 


~ 已 存储 在 指定 的 键 下 的 元 


选择 可 被 聚 


选择 用 户 可 通 


RARE IES 


it tab 键 聚 焦 的 元 


也 属于 类 别 


UI 核心 (UI 
Core) 


Ul 核心 (UI 
Core) 


Ul 核心 (UI 
Core) 


jQuery UI API - :data() Selector 


所 属 类 别 

选择 器 (Selectors) | Ul 核心 (Ul Core) 
用 法 

描述 : 选择 数据 已 存储 在 指定 的 键 下 的 元 素 。 


jQuery( ":data(key)" ) 


学 


参数 描 
key 数据 的 键 。 


表达 式 $( "div:data(foo)") 匹配 一 个 通过 .data( "foo", value ) 存储 
数据 的 div 。 


实例 


选择 带 有 数据 的 元 素 ， 改 变 它 们 的 背景 颜色 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>:data() Selector 实例 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
div { 
width: 100px; 
height: 100px; 
border: 1px solid #000; 
float: left; 
} 
</style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 


<script> 
$( "#one" ).data( "color", "blue" ); 
$( "#three" ).data( "color", "green" ); 


$( ":data(color)" ).each(function() { 
var element - $( this ); 
element.css( "backgroundColor", element.data( "color" ) ); 


3): 


«/script» 


«/body» 
«/html» 
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jQuery UI API - :focusable Selector 


所 属 类 别 
选择 器 (Selectors) | UI 核心 (UI Core) 
法 


描述 : 选择 可 被 聚焦 的 元 素 。 


dB 


jQuery( ":focusable" ) 


一 些 元 素 本 身 是 可 聚焦 的 (focusable) ， 而 另 一 些 元 素 需 要 显 式 设置 tab S85. 

上 两 种 情况 ， 为 了 可 聚焦 (focusable) ， 元 素 都 必须 是 可 见 的 。 

下 面 类 型 的 元 素 如 果 未 被 禁用 ， 则 是 可 聚焦 的 

(focusable) : input, select 、 textarea. button 和 object > $% 
如 果 带 有 href 或 tabindex 属性 ， 则 是 可 聚焦 的 (focusable) 。 area 元 素 
如 果 在 一 个 已 命名 的 map 内 ， 且 带 有 href 属性 ， 且 有 一 个 可 见 的 图 像 使 用 了 访 
map， 则 是 可 聚焦 的 (focusable) 。 所 有 其 他 完全 基于 tabindex 属性 和 可 见 度 
的 元 素 是 可 聚焦 的 (focusable) 。 


注释 : FARA tab 索引 的 元 素 是 :focusable ， 不 是 
[:tabbable](api-tabbable-selector.html) 。 


Y 


实例 


选择 可 聚焦 的 元 素 ， 且 用 一 个 红色 边框 突出 显示 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>:focusable Selector 实例 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
input, a, p { 
border: 1px solid #000; 
} 
div { 
padding: 5px; 
} 
</style> 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div><input value=" 文 本 输入 "></div> 

<div><a> 不 带 有 href 的 锚 </a></div> 

<div><a href="#"> 带 有 href 的 锚 </a></div> 
<div><p> 不 带 有 tabindex 的 段落 </p></div> 

<div><p tabindex="1"> 带 有 tabindex 的 段落 </p></div> 


<script> 
$( ":focusable" ).css( "border-color", "red" ); 
</script> 


</body> 
</html> 





jQuery UI API - :tabbable Selector 


所 属 类 别 

选择 器 (Selectors) | Ul 核心 (UI Core) 
用 法 

描述 : 选择 用 户 可 通过 tab 键 聚焦 的 元 素 。 


jQuery( ":tabbable" ) 


一 些 元 素 本 身 是 可 通过 tab 键 聚 焦 的 (tabbable) ， 而 另 一 些 元 素 需 要 显 式 设置 一 
个 正 的 tab 索引 。 以 上 两 种 情况 ， 为 了 可 通过 tab R Rf (tabbable) ， 元 素 都 必 
须 是 可 见 的 。 

下 面 类 型 的 元 素 如 果 不 带 有 负 的 tab 索引 且 未 被 禁用 ， 则 是 可 通过 tab 键 聚 焦 的 
(tabbable) : input 、 select, textarea, button 和 object 。 锚 如 
果 带 有 href 或 正 的 tabindex 属性 ， 则 是 可 通过 tab 键 聚焦 的 

(tabbable) 。 area 元 素 如 果 在 一 个 已 命名 的 map 内 ， 且 带 有 href Bile, 
且 有 一 个 可 见 的 图 像 使 用 了 该 map， 则 是 可 通过 tab 键 聚焦 的 (tabbable) 。 所 有 
其 他 完全 基于 tabindex 属性 和 可 见 度 的 元 素 是 可 通过 tab 键 聚焦 的 
(tabbable) 。 


注释 : 带 有 负 的 tab 索引 的 元 素 是 
[:focusable](api-focusable-selector.html) ， 不 是 :tabbable 。 


实例 


选择 可 通过 tab 键 聚焦 的 元 素 ， 且 用 一 个 红色 边框 突出 显示 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>:tabbable Selector 实例 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style> 
input { 
border: 1px solid #000; 
} 
div { 
padding: 5px; 
} 
</style> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script srcz"//code.jquery.com/ui/1.10.4/jquery-ui.js"»«/script» 
</head> 
<body> 


<div><input value=" tabindex"></div> 
<div><input tabindex="5" value=" 正 的 tabindex"></div> 
<div><input tabindex="-1" value=" 负 的 tabindex"></div> 


<script> 
$( ":tabbable" ).css( "border-color", "red" ); 
</script> 


</body> 
</html> 
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jQuery UI API X #] - 主题 (Theming) 


jQuery Ul 包括 一 个 强大 的 CSS 框架 ， 用 于 创建 自 定义 的 jQuery 小 部 件 。 该 框架 
包括 涵盖 广泛 的 公共 用 户 界 面 需求 的 Class， 并 且 可 以 使 用 jQuery Ul ThemeRoller 
进行 操纵 。 通 过 使 用 jQuery UI CSS 框架 创建 您 自己 的 UI 组 件 ， 您 应 采用 共享 标 
记 公 约 ， 便 于 插件 社区 的 代码 集成 。 您 可 以 查看 jQuery Ul 主题 了 解 更 多 详情 。 


API 描述 

CSS 框架 (CSS jQuery UI 使 用 的 允许 组 件 主题 化 的 Class 名 称 
Framework) 列表 。 

图 标 (Icons) jQuery UI 提供 的 图 标 列表 。 


堆 过 元素 (Stacking 


一 种 处 理 z-index MHS TMNT. 
Elements) 


jQuery UI API - CSS 框架 (CSS Framework) 


下 面 是 jQuery UI 使 用 的 Class 名 称 列 表 。 这 些 Class 用 来 创建 跨 应 用 程序 的 视觉 

一 致 性 ， 且 人 允许 组 件 通 过 jQuery UI ThemeRoller 进行 主题 化 。 下 面 的 CSS 类 根据 
样式 是 否 是 固定 的 结构 化 的 ， 或 者 是 否 是 可 主题 化 的 (颜色 、 字 体 、 背 景 等 ) ， 分 
别 定 义 在 ui.core.css 和 ui.theme.css 两 个 文件 中 。 


布局 助手 


e .ui-helper-hidden : 对 元 素 应 用 display: none 。 

e .ui-helper-hidden-accessible : 对 元 素 应 用 访问 隐藏 (通过 页 面 绝 对 定 
位 ) 。 

e .ui-helper-reset : Ul 元 素 的 基本 样式 重 置 。 重 置 的 元 素 比 
如 : padding 、 margin. text-decoration 、list-style， 等 等 。 

e .ui-helper-clearfix : 对 父 元 素 应 用 浮动 包装 属性 。 

.ui-helper-zfix :对 &lt;iframe&gt; 元 素 应 用 iframe "fix" CSS, 

e .ui-front : 应 用 z-index 来 管理 屏幕 上 多 个 小 部 件 的 堆 释 ， 如 需 了 解 更 多 
详情 ， 请 查看 AmA (Stacking Elements) 页 面 。 


小 部 件 容器 


e .ui-widget : 对 所 有 小 部 件 的 外 部 容器 应 用 的 Class。 对 小 部 件 应 用 字体 和 
字体 尺寸 ， 同 时 也 对 自 表单 元 素 应 用 相同 的 字体 和 1em 的 字体 尺寸 ， 以 应 对 
Windows 浏览 器 中 的 继承 问题 。 

e .ui-widget-header : 对 标题 容器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文 
本 、 链 接 、 图 标 应 用 标题 容器 样式 。 

e .ui-widget-content : 对 内 容 容 器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文 
本 、 链 接 、 图 标 应 用 内 容 容器 样式 。 (可 应 用 到 标题 的 父 元 素 或 者 同 级 元 素 ) 


交互 状态 


e .ui-state-default : 对 可 点 击 按钮 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "clickable default" 容器 样式 。 

e .ui-state-hover : 当 饮 标 苹 浮 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 
素 及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 

e .ui-state-focus : 当 键 盘 聚 焦 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 
素 及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 

e .ui-state-active : 当 鼠 标点 击 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 素 
及 其 子 元 素 的 文本 、 链 接 、 图 标 应 用 "clickable active" 容器 样式 。 


交互 提示 Cues 


ls les 
[=] 


e .ui-state-highlight : 对 高 之 或 者 选中 元 素 应 用 的 Class。 对 元 素 及 其 子 


元 素 的 文本 、 链 接 、 图 标 应 用 "highlight" 容器 样式 。 

e .ui-state-error : 对 错误 消息 容器 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "error" 容器 样式 。 

e .ui-state-error-text : 对 只 有 无 背景 的 错误 文本 颜色 应 用 的 Class, WI 
用 于 表单 标签 ， 也 可 以 对 子 图 标 应 用 错误 图 标 颜色 。 

e .ui-state-disabled : 对 禁用 的 UI 元 素 应 用 一 个 暗淡 的 不 透明 度 。 意 味 着 
对 一 个 已 经 定义 样式 的 元 素 添 加 额外 的 样式 。 

e .ui-priority-primary : 对 第 一 优先 权 的 按钮 应 用 的 Class。 应 用 粗 体 文 
本 。 

e .ui-priority-secondary : 对 第 二 优先 权 的 按钮 应 用 的 Class, © AER 
粗细 的 文本 ， 对 元 素 应 用 轻微 的 透明 度 。 


图 标 


状态 和 图 像 


e .ui-icon : 对 图 标 元 素 应 用 的 基本 Class。 设 置 尺 寸 为 16px 方块 ， 隐 藏 内 
部 文本 ， 对 "content" 状态 的 精灵 图 像 设 置 背 景 图 像 。 注 意 : .ui-icon 
class 将 根据 它 的 父 容 器 得 到 一 个 不 同 的 精灵 背景 图 像 。 例 
如 ， ui-state-default 容器 内 的 ui-icon 元 素 将 根据 
ui-state-default 的 图 标 颜 色 进 行 着 色 。 


图 标 类 型 


在 声明 .ui-icon class 之 后 ， 接 着 您 可 以 声明 一 个 秒 速 图 标 类 型 的 class。 通 常 
情况 下 ， 图 标 class 遵循 语法 


.ui-icon-(icon type}-{icon sub description}-{direction} 。 
例如 ， 一 个 指向 右 侧 的 三 角形 图 标 ， 如 下 所 示 : .ui-icon-triangle-1-e 


jQuery UI 的 ThemeRoller 在 它 的 预览 一 栏 中 提供 了 全 套 的 CSS 框架 图 标 。 将 鼠标 
悬浮 在 图 标 上 可 查看 cass 名 称 。 


其 他 视觉 效果 


圆 角 半径 助手 


.ui-corner-tl : 对 元 素 的 左上 角 应 用 圆 角 半 径 。 
.ui-corner-tr : 对 元 素 的 右上 角 应 用 圆 角 半径 。 
.ui-corner-bl : 对 元 素 的 左下 角 应 用 圆 角 半径 。 
.ui-corner-br : 对 元 素 的 右 下 角 应 用 圆 角 半径 。 
.ui-corner-top : 对 元 素 上 边 的 左右 角 应 用 圆 角 半径 。 
.ui-corner-bottom : 对 元 素 下 边 的 左右 角 应 用 圆 角 半径 。 
.ui-corner-right : 对 元 素 右 边 的 上 下 角 应 用 圆 角 半径 。 
.Ui-corner-left : 对 元 素 左 边 的 上 下 角 应 用 圆 角 半径 。 


e .ui-corner-all : 对 元 素 的 所 有 四 个 角 应 用 圆 角 半径 。 
feta & 阴影 


e .ui-widget-overlay : 对 覆盖 屏幕 点 用 100% 宽度 和 高 度 ， 同 时 设置 背景 
颜色 /纹理 和 屏幕 不 透明 度 。 

e .ui-widget-shadow : 对 覆盖 应 用 的 Class， 设 置 了 不 透明 度 、 上 偏 移 / 左 偏 
移 ， 以 及 阴影 的 "厚度 "。 厚 度 是 通过 对 阴影 所 有 边 设 置 内 边 距 (padding) 进 
行 应 用 的 。 偏 移 是 通过 设置 上 外 边 距 (margin) 和 左 外 边 距 (margin) 进行 应 
用 的 (可 以 是 正 数 ， 也 可 以 是 负数 ) 。 


jQuery UI API - 图 标 (Icons) 


jQuery UI 提供 了 大 量 可 以 通过 对 元 素 应 用 Class 名 称 来 使 用 的 图 标 (Icons) 。 
Class 名 称 大 体 上 遵循 语法 

.Ui-icon-{icon type}-{icon sub description}-{direction} 。 例 如 ， 下 面 
将 显示 一 个 向 北 的 厚 箭头 的 图 标 : 


<span class="ui-icon ui-icon-arrowthick-1-n"></span> 


图 标 也 集成 到 一 些 jQuery UI 的 小 部 件 ， 比 如 accordion, button, menu. 
下 面 是 jQuery Ul 提供 的 图 标的 完整 列表 : 


jQuery UI API - E $ 7558 (Stacking Elements) 


堆 且 的 或 者 移动 到 其 他 元 素 前 面 的 小 部 件 (Widgets) 当 放 置 到 现实 世界 的 页 面 中 
时 经 常 面临 挑战 。 通 常 通过 简单 地 改变 堆 受 元 素 的 z-index 或 者 父 元 素来 避免 页 
面 上 的 冲突 。 但 是 ，jQuery Ul 需要 一 个 不 需要 手动 改变 z-index 值 的 通用 的 解 
决 方案 。 这 是 通过 ui-front class 来 完成 的 ， 通 常 还 伴随 着 堆 琶 组 件 上 的 
appendTo 选项 。 


ui-front class 


ui-front class 是 非常 基础 的 。 它 只 是 在 元 素 上 设置 了 一 个 静态 的 z-index 
值 。 但 是 ，class 的 存在 是 用 来 表明 堆 释 元 素 要 追加 到 哪里 。 这 人 允许 我 们 利用 府 套 
层 内 容 ， 生 成 一 个 在 大 多 数 情况 下 都 能 使 用 的 默认 的 DOM 位 置 。 


注释 : 当 使 用 ui-front 时 ， 您 必须 设置 position 7j relative 、 
absolute 或 fixed ， 以 便 应 用 z-index 。 


HE SFX (stacking technique) 


MEDIE & 5538 81 RAVE A) BB AB Z8 EA ui-front class， 且 在 大 多 数 情况 
下 ， 应 该 有 一 个 appendTo mm, HATO SIA RAPA : 


e 如 果 一 个 值 设置 为 appendTo 选项 ， 则 追加 堆 释 元 素 到 指定 的 元 素 。 
e 如 果 appendTo 选项 被 设置 为 null (默认 ) ， 则 小 部 件 应 从 相关 的 元 素 开 
台 通 历 DOM。 例 如 ， 当 自动 完成 (autocomplete) 菜单 被 追加 到 DOM, iF 
则 从 相关 的 input 元 素 开始 。 

o 如 果 找 到 一 个 带 有 ui-front class 的 元 素 ， 则 追加 到 该 元 素 。 

o 如 果 没 有 找到 一 个 带 有 ui-front class 的 元 素 ， 则 追加 到 主体 

(body) 。 

HEATER position 必须 设置 为 relative, absolute 或 fixed , 
以 便 应 用 来 自 ui-front class 的 z-index 。 使 用 .position() 将 自动 设置 


position 。 


W3School jQuery Ul 教程 


jQuery UI API X #] - UI 核心 (UI Core) 


由 jquery.ui.core.js 提供 的 功能 。 


API 


:data() Selector 


.disableSelection() 


.enableSelection() 


.focus() 


:focusable 
Selector 


jQuery.ui.keyCode 


.removeUniqueld() 


.scrollParent() 


:tabbable Selector 


.uniqueld() 


.ZIndex() 


描述 


选择 数据 已 存储 在 指定 的 
键 下 的 元 素 。 


茶 用 选择 匹配 的 元 素 集 合 
内 的 文本 内 容 。 


启用 选择 匹配 的 元 素 集 合 
内 的 文本 内 容 。 


异步 聚焦 到 一 个 元 素 。 


选择 可 被 聚焦 的 元 素 。 
一 个 相对 于 数字 值 的 关键 
代码 描述 的 映射 。 


为 匹配 的 元 素 集 合 移 除 由 
.uniqueld() 设置 的 Id. 


获取 最 近 的 可 滚动 的 和 祖 


o 


选择 用 户 可 通过 tab sez 
焦 的 元 素 。 


为 匹配 的 元 素 集合 生成 并 
申请 一 个 唯一 的 Id. 


为 元 素 获 取 z-index。 


也 属于 类 别 


选择 器 (Selectors) 
方法 (Methods) 


方法 (Methods) 


方法 重 载 (Method 
Overrides) | 方法 
(Methods) 


选择 器 (Selectors) 


方法 (Methods) 
方法 (Methods) 
选择 器 (Selectors) 


方法 (Methods) 


方法 (Methods) 


jQuery UI API # 2| - 实用 工具 (Utilities) 


API 描述 也 属于 类 别 
1 BRE: Lu - SJE] co hu 
taas EB 函数 指定 动画 在 不 同 点 上 的 行进 速 
M ago, 使 用 与 所 有 jQuery U1 小 部 件 相同 的 抽象 化 。 小 部 件 
Boe 来 创建 有 状态 的 jQuery 插件 。 (Widgets) 
Factory) 
插件 桥 jQuery.widget.bridge() 方法 是 jQuery 部 件 
(Widget Æ (Widget Factory) 的 一 部 分 。 它 扮演 着 。 小 部 件 
Plugin 由 $.widget() 创建 的 对 象 和 jQuery API 之 (Widgets) 
Bridge) 间 的 中 介 。 
鼠标 交互 i 
ES 交互 
(Mouse 基本 交互 层 。 (Interactions) 
Interaction) 
HEER 
(Method 


position() ”相对 另 一 个 元 素 定 位 一 个 元 素 。 Overrides) | 方 


法 (Method) 


,~ Il AD X g, > T r El / tilitinc \ AAR 
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jQuery UI API - B4 F € (Widget Factory) 
所 属 类 别 
实用 工具 (Utilities) | 小 部 件 (Widgets) 


jQuery.widget( name [, base ], prototype ) 用 法 
描述 : 使 用 与 所 有 jQuery UI 小 部 件 相 同 的 抽象 化 来 创建 有 状态 的 jQuery 插件 。 


jQuery.widget( name [, base ], prototype ) 


参数 类 型 类 型 
name String 要 创建 的 小 部 件 名 称 ， 包 括 命名 空间 。 
xr A = S 
Dade esten 要 继承 的 基础 小 部 件 。 必 须 是 一 个 可 以 使 用 new 


关键 词 实例 化 的 构造 画 数 。 默 认为 jQuery.Widget。 
prototype ”PlainObject ”要 作为 小 部 件 原型 使 用 的 对 象 。 
您 可 以 使 用 $.widget 对 象 作为 要 继承 的 基础 ， 或 者 可 以 明确 地 从 现 有 的 jQuery 


Ul 或 第 三 方 控件 ， 从 头 开始 创建 新 的 小 部 件 。 定 义 一 个 带 有 相同 名 称 的 小 部 件 来 继 
承 基 础 部 件 ， 甚 至 允许 您 适当 地 扩展 小 部 件 。 


jQuery Ul 中 包含 许多 保持 状态 的 小 部 件 ， 因 此 比 典型 的 jQuery 插件 稍 有 不 同 的 使 
用 模式 。 所 有 的 jQuery UI 小 部 件 使 用 相同 的 模式 ， 这 是 由 部 件 库 (Widget 
Factory) 定义 的 。 所 以 ， 只 要 您 学 会 使 用 其 中 一 个 ， 您 就 知道 如 何 使 用 其 他 的 小 部 
件 (Widget) 。 


注释 : 本 章节 使 用 进度 条 部 件 (Progressbar Widget) 演示 实例 ， 但 是 语法 适用 于 
每 个 小 部 件 。 


初始 化 


为 了 跟踪 小 部 件 的 状态 。 我 们 必须 引入 小 部 件 的 全 生命 周期 。 小 部 件 初始 化 时 生命 
周期 开始 。 要 初始 化 一 个 小 部 件 ， 我 们 只 需要 简单 地 在 一 个 或 多 个 元 素 上 调用 插 
件 。 


$( "#elem" ).progressbar(); 


这 将 初始 化 jQuery 对 象 中 的 每 个 元 素 。 上 面 实 例 中 元 素 id 为 "elem", 


选项 
由 于 progressbar() 调用 时 不 带 参 数 ， 小 部 件 是 使 用 默认 选项 进行 初始 化 的 。 
我 们 可 以 在 初始 化 时 传递 一 组 选项 来 覆盖 默认 选项 : 


$( "#elem" ).progressbar({ value: 20 }); 


我 们 可 以 根据 需要 传递 选项 的 个 数 ， 任 何 我 们 未 传递 的 选项 都 使 用 它们 的 默认 值 。 


您 可 以 传递 多 个 选项 参数， 这 些 参 数 将 会 被 合并 为 一 个 对 象 (类 似 于 
$.extend( true, target, objecti, objectN ) ) 。 这 在 为 所 有 实例 覆盖 一 
些 设置 ， 实 例 间 共享 选项 时 很 有 用 : 


var options = { modal: true, show: "slow" }; 
$( "#dialogi" ).dialog( options ); 
$( "#dialog2" ).dialog( options, { autoOpen: false }); 


Pa TE Gab SL 8 BS AERA A, TAR ER a) RI PEOR 
对 象 。 数 组 是 唯一 的 例外 ， 它 们 是 按 原样 引用 的 。 这 个 例外 是 为 了 适当 地 支持 数据 
绑 定 ， 其 中 数据 源 必须 作为 引用 。 


默认 值 保存 在 小 部 件 的 属性 中 ， 因 此 我 们 可 以 覆盖 jQuery Ul 设置 的 值 。 例 如 ， 在 
下 面 的 设置 后 ， 所 有 将 来 的 进度 条 实例 将 默认 为 值 80 : 


$.ui.progressbar.prototype.options.value = 80; 


选项 是 小 部 件 状 态 的 组 成 部 分 ， 所 以 我 们 也 可 以 在 初始 化 后 设置 选项 。 我 们 会 在 后 
续 看 到 option 方法 。 


方法 
现在 小 部 件 已 经 初始 化 ， 我 们 可 以 查询 它 的 状态 ， 或 者 在 小 部 件 上 执行 动作 。 所 有 
初始 化 后 的 动作 都 是 以 方法 调用 方式 执行 。 为 了 在 小 部 件 上 调用 一 个 方法 ， 我 们 向 


jQuery 插件 传递 方法 的 名 称 。 例 如 ， 在 进度 条 部 件 (Progressbar Widget) 上 调用 
value() 方法 ， 我 们 可 以 使 用 : 


$( "#elem" ).progressbar( "value" ); 


如 果 方 法 接受 参数 ， 我 们 可 以 在 方法 名 称 后 传递 参数 。 例 如 ， 要 传递 参数 40 到 
value() 方法 ， 我 们 可 以 使 用 : 


$( "#elem" ).progressbar( "value", 40 ); 


就 像 jQuery 中 的 其 他 方法 ， 大 多 数 的 小 部 件 方法 返回 jQuery 对 象 : 
$( "#elem" ) 


.progressbar( "value", 90 ) 
.addClass( "almost-done" ); 


每 个 小 部 件 都 有 自己 的 方法 设置 ， 这 些 设置 是 基于 小 部 件 提供 的 功能 。 但 是 ， 有 一 
些 方法 是 存在 于 所 有 的 小 部 件 上 ， 这 会 在 下 面 和 行 洋 细 讲解 


事件 
所 有 的 小 部 件 都 有 与 它们 各 种 行为 相关 的 事件 ， 以 便 在 状态 改变 的 时 候 通知 您 。 对 


于 大 多 数 的 小 部 件 ， 当 事件 被 触发 时 ， 名 称 以 小 部 件 名 称 的 小 写字 母 形 式 作为 前 
级 。 例 如 ， 我 们 可 以 绑 定 进度 条 的 change 事件 ， 该 事件 在 值 改变 时 触发 。 


$( "#elem" ).bind( "progressbarchange", function() { 
alert( "The value has changed!" ); 


3); 


每 个 事件 都 有 一 个 对 应 的 回调 ， 这 会 作为 选项 。 如 果 需 要 ， 我 们 可 以 抓 住 进度 条 的 
change 回调 ， 而 不 用 绑 定 oret Ecc 事件 。 


$( "#elem" ).progressbar(( 
change: function() { 
alert( "The value has changed!" ); 


} 
95 
所 有 的 小 部 件 都 有 一 个 change 事件 ， 该 事件 在 实例 化 时 触发 。 


实例 化 


小 部 件 的 实例 是 使 用 带 有 小 部 件 全 称 作 为 键 的 jQuery.data() 存储 的 。 因 此 ， 
您 可 以 使 用 下 面 代码 从 元 素 检索 进度 条 部 件 (Progressbar Widget) 的 实例 对 象 。 


$( "#elem" ).data( "ui-progressbar" ); 
元 素 是 否 绑 定 了 给 定 小 部 件 ， 可 以 使 用 :data 选择 器 来 检测 。 


$( "#elem" ).is( ":data( 'ui-progressbar' )" ); // true 
$( "#elem" ).is( ":data( 'ui-draggable' )" ); // false 


您 也 可 以 使 用 :data 来 获得 作为 给 定 小 部 件 实例 的 所 有 元 素 的 列表 。 


$( ":data( 'ui-progressbar' )" ); 


属性 
所 有 的 小 部 件 都 有 下 面 的 属性 : 


defaultElement : 当 构 造 小 部 件 实例 未 提供 元 素 时 要 使 用 的 元 素 。 例 如 ， 由 于 
进度 条 的 defaultElement 是 

"&1t;div&gt; ", $.ui.progressbar(( value: 50 }) 在 一 个 新 建 的 
&lt;div&gt; 上 实例 化 进度 条 小 部 件 实例 。 

document : 其 内 包含 小 部 件 元 素 的 document 。 如 果 需 要 在 框架 内 与 小 部 件 


进行 交互 时 很 有 用 。 
e element : 一 个 jQuery 对 象 ， 包 含 用 于 实例 化 小 部 件 的 元 素 。 如 果 您 选择 多 


个 元 素 并 调用 .mywidget() ， 将 为 每 个 元 素 创建 一 个 单独 的 小 部 件 实 例 。 因 
此 ， 该 属性 总 是 包含 一 个 元 素 。 

namespace : 小 部 件 原型 存储 的 全 局 jQuery 对 象 的 位 置 。 例 如 ， "ui" 的 
namespace 表示 小 部 件 原 型 存储 在 $.ui 。 

options : 一 个 包含 小 部 件 当 前 使 用 选项 的 对 象 。 在 实例 化 时 ， 用 户 提 供 的 任 
何 选 项 将 会 自动 与 $.myNamespace.mywidget.prototype.options 中 定义 
的 默认 值 合 并 。 用 户 指定 的 选项 会 覆盖 默认 值 。 

uuid : 一 个 表示 控件 标识 符 的 唯一 整数 。 

version : 小 部 件 的 字符 串 版 本 。 对 于 jQuery UI 小 部 件 ， 该 属性 会 被 设置 为 小 
vi jQuery UI 的 版 本 。 插 件 开发 者 必须 在 他 们 的 原型 中 明确 设置 该 属 
widgetEventPrefix : 添加 到 小 部 件 事件 名 称 的 前 级 。 例 如 ， 可 拖 搜 小 部 件 
(Draggable Widget) 的 widgetEventPrefix 是 "drag" ， 因 此 当 创 建 
一 个 draggable 时 ， 事 件 的 名 称 是 "dragcreate" 。 默 认 情 况 下 ， 小 部 件 的 
widgetEventPrefix 是 它 的 名 称 。 注 意 : 该 属性 已 被 度 弃 ， 将 在 以 后 的 版 
本 中 非常 。 事 件 名 称 将 被 改 为 widgetName:eventName (例如 
"draggable:create" ) 。 

widgetFullName : 包含 命名 空间 的 小 部 件 全 称 。 对 于 

$.widget( "myNamespace.myWidget", () ) ， widgetFullName 将 是 
"myNamespace-myWidget" 。 

e widgetName : 小 部 件 的 名 称 。 对 于 

$.widget( "myNamespace.myWidget", () ) ， widgetName 将 是 
"mywidget" 。 

window : 其 内 包含 小 部 件 元 素 的 window 。 如 果 需 要 在 框架 内 与 小 部 件 进行 
交互 时 很 有 用 。 


jQuery.Widget 基础 小 部 件 用 法 


描述 : 部 件 库 (Widget Factory) 使 用 的 基础 小 部 件 。 


快速 导航 


选项 


disabledhideshow | create delay destroy focusable getCreateEventData ge 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 小 部 件 。 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 小 部 件 : 


$( ".selector" ) ,widget({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).widget( "option", "disabled" ); 


// setter 
$( ".selector" ).widget( "option", "disabled", true ); 


默认 值 : false 


hide 

类 型 : Boolean 或 Number 或 String 或 Object 

描述 : 是 否 使 用 动画 隐藏 元 素 ， 以 及 如 何 动画 隐藏 元 素 。 
支持 多 个 类 型 : 


e Boolean: 当 设 置 为 false 时 ， 则 不 使 用 动画 ， 元 素 会 立即 隐藏 。 当 设置 为 
true 时 ， 元 素 会 使 用 默认 的 持续 时 间 和 默认 的 easing 淡出 。 

e Number : 元 素 将 使 用 指定 的 持续 时 间 和 默认 的 easing 淡出 。 

e String : 元 素 将 使 用 指定 的 特效 隐藏 。 该 值 可 以 是 一 个 内 建 的 jQuery 动画 方法 
名 称 ， 上 比如 "slideup" ， 也 可 以 是 一 个 jQuery Ul 特效 的 名 称 ， 比 
如 "fold" 。 以 上 两 种 情况 的 特效 将 使 用 默认 的 持续 时 间 和 默认 的 easing。 

e Object : 如 果 值 是 一 个 对 象 ， 则 effect 、 delay 、 duration 和 
easing 属性 会 被 提供 。 如 果 effect 属性 包含 jQuery 方法 的 名 称 ， 则 使 
用 该 方法 ， 否 则 ， 它 被 认为 是 一 个 jQuery UI 特效 的 名 称 。 当 使 用 一 个 支持 额 
外 设置 的 jQuery Ul 特效 时 ， 您 可 以 在 对 象 中 包含 这 些 设置 ， 且 它们 会 被 传递 


给 特效 。 如 果 duration 或 easing 被 省 略 ， 则 使 用 默认 值 。 如 果 
effect 被 省 略 ， 则 使 用 "fadeout" 。 如 果 delay 被 省 略 ， 则 不 使 用 延 


A. 
代码 实例 : 
初始 化 带 有 指定 hide 选项 的 小 部 件 : 

$( ".selector" ) ,widget({ hide: { effect: "explode", duration: 100( 
‘| — 
在 初始 化 后 ， 获 取 或 设置 hide 选项 : 








// getter 
var hide = $( ".selector" ).widget( "option", "hide" ); 


// setter 
$( ".selector" ).widget( "option", "hide", { effect: "explode", du 





默认 值 : null 


show 

类 型 : Boolean 或 Number 或 String 或 Object 

描述 : 是 否 使 用 动画 显示 元 素 ， 以 及 如 何 动画 显示 元 素 。 
支持 多 个 类 型 : 


e Boolean: 当 设 置 为 false 时 ， 则 不 使 用 动画 ， 元 素 会 立即 显示 。 当 设置 为 
true 时 ， 元 素 会 使 用 默认 的 持续 时 间 和 默认 的 easing RA. 

e Number : 元 素 将 使 用 指定 的 持续 时 间 和 默认 的 easing SKA. 

e String : 元 素 将 使 用 指定 的 特效 显示 。 该 值 可 以 是 一 个 内 建 的 jQuery 动画 方法 
名 称 ， 比 如 "slideDown" ， 也 可 以 是 一 个 jQuery Ul 特效 的 名 称 ， 比 
如 "fold" 。 以 上 两 种 情况 的 特效 将 使 用 默认 的 持续 时 间 和 默认 的 easing. 

e Object : 如 果 值 是 一 个 对 象 ， 则 effect, delay, duration 和 
easing 属性 会 被 提供 。 如 果 effect 属性 包含 jQuery 方法 的 名 称 ， 则 使 
用 该 方法 ， 否 则 ， 它 被 认为 是 一 个 jQuery UI 特效 的 名 称 。 当 使 用 一 个 支持 额 
外 设置 的 jQuery Ul 特效 时 ， 您 可 以 在 对 象 中 包含 这 些 设置 ， 且 它们 会 被 传递 
给 特效 。 如 果 duration 或 easing 被 省 略 ， 则 使 用 默认 值 。 如 果 
effect 被 省 略 ， 则 使 用 "fadeIn" 。 如 果 delay 被 省 略 ， 则 不 使 用 延 


R, 
代码 实例 : 
初始 化 带 有 指定 show 选项 的 小 部 件 : 


$( ".selector" ).widget({ show: { effect: "blind", duration: 800 } 





«| 


在 初始 化 后 ， 获 取 或 设置 show 选项 : 





// getter 
var show = $( ".selector" ).widget( "option", "show" ); 


// setter 
$( ".selector" ).widget( "option", "show", { effect: "blind", dural 


默认 值 : null 


方法 





_create() 


类 型 : jQuery (plugin only) 


描述 : _create() DAE DSH ERNA. SB (B= this.element 
和 this.options 已 经 设置 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 
基于 一 个 选项 设置 小 部 件 元 素 的 背景 颜色 。 


_create: function() { 
this.element.css( "background-color", this.options.color ); 


} 


_delay( fn [, delay ] ) 

类 型 : Number 

描述 : 在 指定 延迟 后 调用 提供 的 函数 。 保 持 this 上 下 文正 确 。 本 质 上 是 
SetTimeout() 。 


使 用 clearTimeout() 返回 超时 ID, 


e fn X Zi : Function() 或 String 描述 : 要 调用 的 函数 。 也 可 以 是 小 部 件 上 方法 的 
名 称 。 
e delay 类 型 : Number 描述 : 调用 函数 前 等 待 的 毫秒 数 ， 默 认为 0 。 


代码 实例 : 
100 毫秒 后 在 小 部 件 上 调用 foo() 方法 。 


this._delay( this._foo, 100 ); 


_destroy() 


类 型 : jQuery (plugin only) 


描述 : 公共 的 destroy() 方法 清除 所 有 的 公共 数据 、 事 件 等 等 。 代 表 了 定制 、 
指定 小 部 件 、 清 理 的  destroy() 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 
当 小 部 件 被 销毁 时 ， 从 小 部 件 的 元 素 移 除 一 个 class. 


destroy: function() { 
this.element.removeClass( "my-widget" ); 


j 


. focusable( element ) 


类 型 : jQuery (plugin only) 


描述 : 建立 聚焦 在 元 素 上 时 要 应 用 ui-state-focus class 的 element , 
e element 类 型 : jQuery 描述 : 要 应 用 focusable 行为 的 元 素 。 
代码 实例 : 


向 小 部 件 内 的 一 组 元 素 应 用 focusable 样式 : 


this. focusable( this.element.find( ".my-items" ) ); 


_getCreateEventData() 
类 型 : Object 


描述 : 所 有 的 小 部 件 触发 create 事件 。 默 认 情 况 下 ， 事 件 中 不 提供 任何 的 数 
据 ， 但 是 该 方法 会 返回 一 个 对 象 ， 作 为 “create 事件 的 数据 被 传递 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 


向 create 事件 处 理 程 序 传 递 小 部 件 的 选项 ， 作 为 参数 。 


_getCreateEventData: function() { 
return this.options; 


} 


_getCreateOptions() 
类 型 : Object 
描述 : 该 方法 允许 小 部 件 在 初始 化 期 间 为 定义 选项 定义 一 个 自 定 义 的 方法 。 用 户 提 
供 的 选项 会 覆盖 该 方法 返回 的 选项 ， 即 会 覆盖 默认 的 选项 。 
。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
让 小 部 件 元 素 的 id 属性 作为 选项 可 用 。 


_getCreateOptions: function() { 
return { id: this.element.attr( "id" ) }; 


} 


_hide( element, option [, callback ] ) 


类 型 : jQuery (plugin only) 
描述 : 使 用 内 置 的 动画 方法 或 使 用 自 定义 的 特效 隐藏 一 个 元 素 。 如 需 了 解 可 能 的 
option 值 ， 请 查看 hide, 
e element 类 型 : jQuery 描述 : 要 隐藏 的 元 素 。 
e option 类 型 : Object 描述 : 定义 如 何 隐 藏 元 素 的 设置 。 
e callback 类 型 : Function() 描述 : 元 素 完 全 隐藏 后 要 调用 的 回调 。 
代码 实例 : 
为 自 定 义 动 画 传 递 hide 选项 。 


this. hide( this.element, this.options.hide, function() { 


// Remove the element from the DOM when it's fully hidden. 
$( this ).remove(); 


3); 


. hoverable( element ) 


类 型 : jQuery (plugin only) 


füxh: 建立 悬浮 在 元 素 上 时 要 应 用 ui-state-hover class 的 element 。 事 件 
义理 程序 在 销毁 时 自动 清理 。 


e element 类 型 : jQuery 描述 : 要 应 用 hoverable 行为 的 元 素 。 
代码 实例 : 
当 晨 浮 在 元 素 上 时 ， 向 元 素 内 所 有 的 div 应 用 hoverable 样式 。 


this. hoverable( this.element.find( "div" ) ); 


_init() 
类 型 : jQuery (plugin only) 


描述 : 小 部 件 初始 化 的 理念 与 创建 不 同 。 任 何 时 候 不 带 参 数 的 调用 插件 或 者 只 带 一 
个 选项 哈 希 的 调用 插件 ， 初 始 化 小 部 件 。 当 小 部 件 被 创建 时 会 包含 这 个 方法 。 


注释 : 如 果 存 在 不 带 参数 成 功 调用 小 部 件 时 要 执行 的 逻辑 动作 ， 初 始 化 只 能 在 这 时 
处 理 。 


。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

如 果 设 置 了 _ autoopen 选项 ， 则 调用 open() 方法 。 
_init: function() ( 


if ( this.options.autoOpen ) { 
this.open(); 


_off( element, eventName ) 


类 型 : jQuery (plugin only) 
描述 : 从 指定 的 元 素 取消 绑 定 事件 处 理 程 序 。 


e element 类 型 : jQuery 描述 : 要 取消 绑 定 事件 处 理 程序 的 元 素 。 不 像 _on() 
方法 ， _off() 方法 中 元 素 是 必需 的 。 
e eventName 类 型 : String 描述 : 一 个 或 多 个 空格 分 隔 的 事件 类 型 。 


代码 实例 : 
从 小 部 件 的 元 素 上 取消 绑 定 所 有 click 事件 。 


this. off( this.element, "click" ); 


_on( [suppressDisabledCheck ] [, element ], handlers ) 


类 型 : jQuery (plugin only) 


描述 : 授权 通过 事件 名 称 内 的 选择 器 被 支持 ， 例 如 "Click .foo" 。  on() A 
法 提供 了 一 些 直接 事件 绑 定 的 好 人 处: 


保持 处 理 程序 内 适当 的 this 上下文。 

自动 处 理 禁 用 的 部 件 : 如 果 小 部 件 被 禁用 或 事件 发 生 在 带 有 
ui-state-disabled class 的 元 素 上 ， 则 不 调用 事件 义理 程序 。 可 以 被 
suppressDisabledCheck 参数 重 写 。 

事件 义理 程序 会 自动 添加 命名 空间 ， 在 销毁 时 会 自 自动 清理 。 

suppressDisabledCheck (默认 值 : false ) 类 型 Boolean 描述 : 是 否 

要 绕 过 禁用 的 检查 。 

element 类 型 : jQuery 描述 : 要 绑 定 事件 处 理 程 序 的 元 素 。 如 果 未 提供 元 

素 ， this.element 用 于 未 授权 的 事件 ，widget 元 素 用 于 授权 的 事件 。 

handlers 类 型 : Object 描述 : 一 个 map， 其 中 字符 串 键 代 表 事件 类 型 ， 可 选 
的 选择 器 用 于 授权 ， 值 代表 事件 调用 的 处 理 隙 数 。 


代码 实例 : 
放置 小 部 件 元 素 内 所 有 被 点 击 的 链接 的 默认 行为 。 


this._on( this.element, { 
"click a": function( event ) { 
event .preventDefault(); 


} 
] 


_setOption( key, value ) 


类 型 : jQuery (plugin only) 


描述 : 为 每 个 独立 的 选项 调用  setoptions() 方法 。 小 部 件 状态 随 着 改变 而 更 
新 。 


e key 类 型 String 描述 : 要 设置 的 选项 名 称 。 
e value 类 型 : Object 描述 : 为 选项 设置 的 值 。 


代码 实例 : 
当 小 部 件 的 height 或 width 选项 改变 时 ， 更 新 小 部 件 的 元 素 。 


_setOption: function( key, value ) { 
if ( key === "width" ) { 
this.element.width( value ); 


} 
if ( key === "height" ) { 
this.element.height( value ); 


this. super( key, value ); 


j 


_setOptions( options ) 


类 型 : jQuery (plugin only) 


描述 : 当 调 用 option() 方法 时 调用 ， 无 论 以 什么 形式 调用 option() . WR 
您 要 根据 多 个 选项 的 改变 而 改变 处 理 器 密集 型 ， 重 载 该 方法 是 很 有 用 的 。 


e options 类 型 : Object 描述 : 为 选项 设置 的 值 。 

代码 实例 : 

如 果 小 部 件 的 height 或 width 选项 改变 ， 调用 resize 方法 。 
_setOptions: function( options ) { 


var that this, 
resize false; 


$.each( options, function( key, value ) { 
that. ee cose key, value ); 
if ( key === "height" &#124;&#124; key === "width" ) { 
resize = ee 
} 


}); 


if ( resize ) ( 
this.resize(); 
} 
} 


_show( element, option [, callback ] ) 


类 型 : jQuery (plugin only) 


描述 : 使 用 内 置 的 动画 方法 或 使 用 自 定 义 的 特效 显示 一 个 元 素 。 如 需 了 解 可 能 的 
option 值 ， 请 查看 show。 


e element 类 型 : jQuery 描述 : 要 显示 的 元 素 。 
e option 类 型 : Object 描述 : 定义 如 何 显示 元 素 的 设置 


e callback 类 型 : Function() 描述 : 元 素 完全 显示 后 要 调用 的 回调 。 
代码 实例 : 
为 自 定义 动画 传递 show 选项。 


this. show( this.element, this.options.show, function() { 
// Focus the element when it's fully visible. 
this.focus(); 


} 


_super( [arg ] [, … ] ) 
类 型 : jQuery (plugin only) 


描述 : 从 父 部 件 中 调用 相同 名 称 的 方法 ， 带 有 任意 指定 的 参数 。 本 质 上 是 
ae. 


e arg 类 型 Object 描述 : 要 传递 给 父 部 件 的 方法 的 需 到 多 个 参数 。 
代码 实例 : 
义理 title 选项 更 新 ， 并 调用 付 部 件 的 _setoption() 来 更 新 选项 的 内 部 存 
储 。 
_setOption: function( key, value ) { 
if ( key === "title" ) { 
this.element.find( "h3" ).text( value ); 


this._super( key, value ); 


_superApply( arguments ) 
类 型 : jQuery (plugin only) 


描述 : 从 父 部 件 中 调用 相同 名 称 的 方法 ， 带 有 参数 的 数组 。 本 质 上 是 
.apply() o 


e arguments 类 型 : Array 描述 : 要 传递 给 父 部 件 的 方法 的 参数 数组 。 
代码 实例 : 


XIE title 选项 更 新 ， 并 调用 付 部 件 的 _setOption() 来 更 新 选项 的 内 部 存 
储 。 


_setOption: function( key, value ) { 


if ( key === "title" ) { 
this.element.find( "h3" ).text( value ); 

j 

this. superApply( arguments ); 


j 


_trigger( type [, event ] [, data ] ) 


类 型 : Boolean 


描述 : 触发 一 个 事件 及 其 相关 的 回调 。 带 有 该 名 称 的 选项 与 作为 回调 被 调用 的 类 型 
相等 。 

事件 名 称 是 小 部 件 名 称 和 类 型 的 小 写字 母 串 。 

注释 : 当 提 供 数据 时 ， 您 必须 提供 所 有 三 个 参数 。 如 果 没 有 传递 事件 ， 则 传递 
null o 


如 果 上 默认 行为 是 阻止 的 ， 则 返回 false, FURE true 。 当 义理 程序 返回 
false 时 或 调用 event.preventDefault() 时 ， 则 阻止 默认 行为 发 生 。 


e type 类 型 : String 描述 : type 应 该 匹配 回调 选项 的 名 称 。 完 整 的 事件 类 型 
会 自动 生成 。 
e event 类 型 : Event 描述 : 导致 该 事件 发 生 的 原始 事件 ， 想 听众 提供 上 下 文 时 


很 有 用 。 
e data 类 型 : Object 描述 : 一 个 与 事件 相关 的 数据 哈 希 。 
代码 实例 : 


当 按 下 一 个 键 时 ， 触 发 search 事件 。 


this. on( this.element, { 
keydown: function( event ) { 


// Pass the original event so that the custom search event has 
// useful information, such as keyCode 
this. trigger( "search", event, { 


// Pass additional information unique to this event 
value: this.element.val() 


3); 
} 
3); 
0 eI 


destroy() 


类 型 : jQuery (plugin only) 


描述 : 完全 移 除 小 部 件 功能 。 这 会 把 元 素 返 回 到 它 的 预 初 始 化 状态 。 


。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
当 点 击 小 部 件 的 任意 锚 点 时 销毁 小 部 件 。 


this._on( this.element, { 
"click a": function( event ) { 
event .preventDefault(); 
this.destroy(); 


} 
}); 


disable() 
类 型 : jQuery (plugin only) 
描述 : 禁用 小 部 件 。 

。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
当 点 击 小 部 件 的 任意 锚 点 时 禁用 小 部 件 。 


this. on( this.element, { 
"click a": function( event ) { 
event.preventDefault(); 
this.disable(); 


} 
T); 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 小 部 件 。 
。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
当 点 击 小 部 件 的 任意 锚 点 时 启用 小 部 件 。 


this. on( this.element, { 
"click a": function( event ) { 
event .preventDefault(); 
this.enable(); 


} 
3): 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 


获得 width 选项 的 值 。 


this.option( "width" ); 


option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 小 部 件 选 项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

记录 每 个 小 部 件 选项 的 键 / 值 对 ， 用 于 调试 。 
var options = this.option(); 
for ( var key in options ) { 


console.log( key, options[ key ] ); 
} 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 小 部 件 选项 的 值 。 


e optionName X Z! : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 


设置 width 选项 为 500 。 


this.option( "width", 500 ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 小 部 件 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 


设置 height 和 width 选项 为 500 。 


this.option({ 


width: 500, 
height: 500 
3): 
widget() 


类 型 : jQuery 

描述 : 返回 一 个 包含 原始 元 素 或 其 他 相关 的 生成 元 素 的 jQuery WR. 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

当 创建 小 部 件 时 ， 在 小 部 件 的 原始 元 素 周围 放置 一 个 红色 的 边框 。 


_create: function() { 
this.widget().css( "border", "2px solid red" ); 
j 


事件 


create( event, ui ) 


类 型 : widgetcreate 
描述 : 当 小 部 件 被 创建 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 小 部 件 : 


$( ".selector" ).widget({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 widgetcreate 事件 : 


$( ".selector" ).on( "widgetcreate", function( event, ui ) {} ); 


jQuery UI API - 插件 桥 (Widget Plugin Bridge) 


所 属 类 别 


实用 工具 (Utilities) | 小 部 件 (Widgets) 


用 法 


描述 : jQuery.widget.bridge() 方法 是 jQuery 部 件 库 (Widget Factory) 的 一 部 
分 。 它 扮演 着 由 $.widget() 创建 的 对 象 和 jQuery API 之 间 的 中 介 。 


jQuery.widget.bridge( name, constructor ) 


参数 类 型 类 型 
name String 要 创建 的 插件 名 称 。 
constructor Function() 当 插 件 被 调用 时 要 实例 化 的 对 象 。 


$.widget.bridge() 做 如 下 事情 : 


连接 一 个 常规 的 JavaScript 构造 画 数 到 jQuery API. 
自动 创建 对 象 实例 ， 并 存储 在 元 素 的 $.data RFA. 
允许 调用 公有 方法 。 

防止 调用 私有 方法 。 

防止 在 未 初始 化 的 对 象 上 调用 方法 。 

防止 多 个 初始 化 。 


jQuery UI 小 部 件 使 用 $.widget( "foo.bar", () ); 语法 定义 一 个 对 象 来 创 
建 。 给 出 一 个 带 有 五 个 .foo, $( ".foo" ).bar(); 的 DOM 结构 将 创建 
"bar" 对 象 的 五 个 实例 。 $.widget.bridge() 基于 "bar' 对 象 和 一 个 公共 的 API 
在 库 内 工作 。 因 此 ， 您 可 以 通过 编写 $( ".foo" ).bar() 来 创建 实例 ， 通 过 编 
写 $( ".foo" ).bar( "baz" ) 来 调用 方法 。 


如 果 您 只 想 一 次 性 初始 化 并 调用 方法 ， 那 么 您 所 传递 给 
jQuery.widget.bridge() 的 对 象 可 以 很 小 : 


var Highlighter = function( options, element ) { 
this.options = options; 
this.element = $( element ); 
this._set( 800 ); 
3; 
Highlighter.prototype - ( 
toggle: function() { 
this. set( this.element.css( "font-weight") === 400 ? 800 : 40( 
3 
_set: function(value) ( 
this.element.css( "font-weight", value ); 





在 这 里 ， 您 需要 的 只 是 一 个 构造 画 数 ， 接 收 两 个 参数 : 


e options : 一 个 配置 选项 的 对 象 
e element : 该 实例 在 其 上 创建 的 DOM 元 素 


后 您 可 以 使 用 桥 (bridge) 把 该 对 象 作为 一 个 jQuery 插件 ， 且 可 以 在 任意 的 
EU. 


// Hook up the plugin 
$.widget.bridge( "colorToggle", Highlighter ); 


// Initialize it on divs 

$( "div" ).colorToggle().click(function() { 
// Call the public method on click 
$( this ).colorToggle( "toggle" ); 

3); 


为 了 使 用 桥 (bridge) 的 所 有 特性 ， 您 的 对 象 原型 需要 有 一 方法 。 该 
方法 在 调用 插件 且 实 例 已 存在 时 调用 。 在 这 种 情况 下 ， ae 

option() 方法 。 该 方法 将 会 以 选项 作为 第 一 个 参数 被 调用 。 如 果 没 有 选项 ， 则 
参数 为 一 个 空 对 象 。 如 需 了 解 option 方法 的 使 用 ， 请 查看 $.widget o 


桥 (bridge) 有 一 个 可 选 的 属性 ， 如 果 存 在 : 如 果 对 象 原型 有 一 
widgetFullName 属性 ， 则 该 属性 将 被 作为 存储 和 检索 实例 的 键 。 否 则 ， 将 使 用 
name 参数 。 


jQuery UI API 类 别 - 小 部 件 (Widgets) 


小 部 件 (Widgets) 是 功能 丰富 、 有 状态 的 插件 ， 它 有 一 个 完整 的 生命 周期 ， 带 有 
方法 和 事件 。 您 可 以 查看 部 件 库 (Widget Factory) 文档 了 解 更 多 详情 。 


API 描述 也 属于 类 别 
H & HAR aw 
(Accordion 把 一 对 标题 和 内 容 面板 转换 成 折 生 面板 。 
Widget) 
自动 完成 部 件 自动 完成 功能 根据 用 户 输入 值 进行 搜索 和 过 
(Autocomplete ” 滤 ， 让 用 户 快速 找到 并 从 预 设 值 列表 中 选 
Widget) 择 。 
按钮 部 件 
(Button 可 主题 化 的 按钮 和 按钮 集合 。 
Widget) 
日 期 选择 器 部 件 
(Datepicker 从 弹出 框 或 在 线 日 历 选 择 一 个 日 期 。 
Widget) 
对 话 框 部 件 
(Dialog 在 一 个 交互 覆盖 层 中 打开 内 容 。 
Widget) 
部 件 库 (Widget ”使 用 与 所 有 jQuery UI 小 部 件 相 同 的 抽象 化 实用 工具 
Factory) 来 创建 有 状态 的 jQuery 插件 。 (Utilities) 
jQuery.widget.bridge() 方法 是 jQuery 部 件 
插件 桥 (Widget œ (Widget Factory) 的 一 部 分 。 它 扮演 着 实用 工具 
Plugin Bridge) FA $.widget() 创建 的 对 象 和 jQuery API 之 间 (Utilities) 


的 中 介 。 


带 有 鼠标 和 键盘 交互 的 用 于 导航 的 可 主题 化 
Widget) 人 
进度 条 部 件 
(Progressbar 显示 一 个 确定 的 或 不 确定 的 进程 状态 。 
Widget) 
滑 块 部 件 
(Slider 拖 动 手柄 可 以 选择 一 个 数值 。 
Widget) 
旋转 器 部 件 


(Spinner 


if aris ] / \ [9 
Iw] lel VU Al 


通过 向 上 /向 下 按钮 和 箭头 键 处 理 ， 为 输入 数 


W3School jQuery UI 教程 


RERSE SRO UAE, ST STU 
(Tabs 的 标题 相关 

Widget) d SE 

pod al 可 自 定义 的 、 可 主题 化 的 工具 提示 框 ， 蔡 代 
" doel) 原生 的 工具 提示 框 。 


jQuery UI API 类 别 - 小 部 件 (Widgets) 


jQuery UI API - 折 受 面板 部 件 (Accordion 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 把 一 对 标题 和 内 容 面 板 转 换 成 折 受 面板 。 
版 本 新 增 : 1.0 
折 和 过 面板 容器 的 标记 需要 一 对 标题 和 内 容 面板 。 
<div id="accordion"> 
<h3>First header</h3> 
<div>First content panel</div> 
<h3>Second header</h3> 


<div>Second content panel</div> 
</div> 


Te mdxHHEXGG, GESTAAMRY ERKA BRA TAA 
级 。 请 查看 header 选项 了 解 如 何 使 用 自 定 义 的 标记 结构 。 
面板 可 以 通过 设置 active 选项 以 编程 的 方式 激活 。 


REH 


e DOWNRIGHT - 移动 焦点 到 下 一 个 标题 (header) 。 如 果 在 最 后 一 个 标题 


e HOME -移动 焦点 到 第 一 个 标题 (header) E. 
e END - 移动 焦点 到 最 后 一 个 标题 (header) 上 。 
e SPACE/ENTER - 激活 与 获得 焦点 的 标题 (header) 相关 的 面板 (panel) 。 


主题 化 


Hrá mièi (Accordion Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 
观 的 样式 。 如 果 需 要 使 用 折 且 面 板 指定 的 祥 式 ， 则 可 以 使 用 下 面 的 CSS class 名 
FR : 


e ui-accordion : 折 受 面板 的 外 层 容器 。 
o ui-accordion-header : 折 营 面板 的 标题 。 如 果 标 题 包 含 icons ， 则 
标题 会 另外 有 个 ui-accordion-icons class。 
o ui-accordion-content : 折 受 面板 的 内 容 面板 。 


依赖 

e Ul 核心 (UI Core) 

e 部 件 库 (Widget Factory) 

e 特效 核心 (Effects Core) (可 选 的 ; 44 animate 选项 一 起 使 用 时 ) 
附加 说 明 

e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 

主题 ， 请 使 用 小 部 件 指 定 的 CSS 文件 作为 起 点 。 
快速 导航 
选项 


activeanimatecollapsibledisabledeventheaderheightStyleicons | destroydisablee 


active 

类 型 : Boolean 3 Integer 
描述 : 当前 打开 哪 一 个 面板 。 
支持 多 个 类 型 : 


e Boolean: 设置 active 为 false 将 折 和 县 所 有 的 面板 。 这 要 求 
collapsible 选项 必须 为 true 。 

e Integer: 激活 打开 的 面板 索引 ， 以 需 为 基础 。 负 值 则 表示 从 最 后 一 个 面板 后 退 
选择 面板 。 


代码 实例 : 


初始 化 带 有 指定 active 选项 的 accordion : 


$( ".selector" ).accordion({ active: 2 }); 


在 初始 化 后 ， 获 取 或 设置 active 选项 : 
// getter 


var active = $( ".selector" ).accordion( "option", "active" ); 


// setter 
$( ".selector" ).accordion( "option", "active", 2 ); 


默认 值 : 0 


animate 

类 型 : Boolean 或 Number 或 String 或 Object 

描述 : 是 否 使 用 动画 改变 面板 ， 且 如 何 使 用 动画 改变 面板 。 
支持 多 个 类 型 


Boolean: false 值 业 禁用 动画 。 
Number : easing 默认 的 持续 时 间 ， 以 毫秒 计 。 
String : 默认 的 持续 时 间 要 使 用 的 easing 名 称 。 
Object: easing 和 duration 属性 的 动画 设置 
e 上 面 任意 的 选项 都 可 以 包含 down 属性 。 
e 当 被 激活 的 面板 有 一 个 比 当前 激活 面板 较 低 的 指数 时 ， 发 生 "Down" 动画 
代码 实例 : 


初始 化 带 有 指定 animate 选项 的 accordion : 


$( ".selector" ).accordion({ animate: "bounceslide" }); 


在 初始 化 后 ， 获 取 或 设置 animate 选项 : 


// getter 
var animate = $( ".selector" ).accordion( "option", "animate" ); 


// setter 
$( ".selector" ).accordion( "option", "animate", "bounceslide" ); 


SSS ——Á— ESI [| in( 
默认 值 : 人 
collapsible 


类 型 : Boolean 


描述 : 所 有 部 分 是 否 都 可 以 马上 关闭 。 人 允许 折 受 激活 的 部 分 。 
代码 实例 : 


初始 化 带 有 指定 collapsible 选项 的 accordion : 


$( ".selector" ).accordion({ collapsible: true }); 


在 初始 化 后 ， 获 取 或 设置 collapsible 选项 : 


// getter 
var collapsible = $( ".selector" ).accordion( "option", "collapsib- 


// setter 
$( ".selector" ).accordion( "option", "collapsible", true ); 


E a ee ee 


默认 值 : false 





disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 accordion, 
代码 实例 : 


初始 化 带 有 指定 disabled 选项 的 accordion : 


$( ".selector" ).accordion({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).accordion( "option", "disabled" ); 


// setter 
$( ".selector" ).accordion( "option", "disabled", true ); 


BESS y E 
默认 值 : false 
event 


类 型 : String 


描述 : accordion 头 部 会 作出 反应 的 事件 ， 用 以 激活 相关 的 面板 。 可 以 指定 多 个 事 
件 ， 用 空格 间隔 。 


代码 实例 : 


初始 化 带 有 指定 event 选项 的 accordion : 


$( ".selector" ).accordion({ event: "mouseover" }); 


在 初始 化 后 ， 获 取 或 设置 event 选项 : 


// getter 
var event = $( ".selector" ).accordion( "option", "event" ); 


// setter 
$( ".selector" ).accordion( "option", "event", "mouseover" ); 


默认 值 : "click" 


header 
类 型 : Selector 


描述 : 标题 元 素 的 选择 器 ， 通 过 主要 accordion 元 素 上 的 find) 进行 应 用 。 内 容 面 
板 必须 是 紧 跟 在 与 其 相关 的 标题 后 的 同 级 元 素 。 


代码 实例 : 


初始 化 带 有 指定 header 选项 的 accordion : 


$( ".selector" ).accordion({ header: "h3" 3); 


在 初始 化 后 ， 获 取 或 设置 header 选项 : 


// getter 
var header = $( ".selector" ).accordion( "option", "header" ); 


// setter 
$( ".selector" ).accordion( "option", "header", "h3" ); 


PRIMA : "> li > :first-child,> :not(li):even" 


heightStyle 


类 型 : String 


描述 : 控制 accordion 和 每 个 面板 的 高 度 。 可 能 的 值 : 
e "auto" : 所 有 的 面板 将 会 被 设置 为 最 高 的 面板 的 高 度 。 
e "fill" : 基于 accordion 的 父 元 素 的 高 度 ， 扩 展 到 可 用 的 高 度 。 
e "content" : 每 个 面板 的 高 度 取决 于 它 的 内 容 。 

代码 实例 : 


初始 化 带 有 指定 heightStyle 选项 的 accordion : 


$( ".selector" ).accordion({ heightStyle: "fill" }); 


在 初始 化 后 ， 获 取 或 设置 heightStyle 选项 : 


// getter 
var heightStyle = $( ".selector" ).accordion( "option", "heightSty- 


// setter 
$( ".selector" ).accordion( "option", "heightStyle", "fill" ); 


E ————————————!————— M —MÀ— Ma 
默认 值 "auto" 





icons 
类 型 : Object 


描述 : 标题 要 使 用 的 图 标 ， 和 与 jQuery UI CSS 框架 提供 的 图 标 (Icons) 匹配 。 设 
A false 则 不 显示 图 标 。 


e header (string, EA 4& : "ui-icon-triangle-1-e") 
e activeHeader (string, SA f& : "ui-icon-triangle-1-s") 


代码 实例 : 


初始 化 带 有 指定 icons 选项 的 accordion : 


$( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "ac 
——————— a ee; 


在 初始 化 后 ， 获 取 或 设置 icons 选项 : 





// getter 
var icons = $( ".selector" ).accordion( "option", "icons" ); 


// setter 
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icor 
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默认 值 : { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" } 
方法 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 accordion 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).accordion( "destroy" ); 


disable() 


类 型 : jQuery (plugin only) 
描述 : 禁用 accordion. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).accordion( "disable" ); 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 accordion, 


。 该 方法 不 接受 任何 参数 。 


代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).accordion( "enable" ); 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 


var isDisabled = $( ".selector" ).accordion( "option", "disabled" ` 


TE Ei a ——— — — O eee 





option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 accordion 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).accordion( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 accordion 选项 的 值 。 


e optionName 类 型 String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).accordion( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 accordion 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).accordion( "option", { disabled: true } ); 


refresh() 


类 型 : jQuery (plugin only) 


描述 : 处 理 任何 在 DOM 中 直接 添加 或 移 除 的 标题 和 面板 ， 并 重新 计算 accordion 
的 高 度 。 结 果 取 决 于 内 容 和 ([heightStyle](#option-heightStyle ) 选项 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refresh 方法 : 


$( ".selector" ).accordion( "refresh" ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 accordion 的 jquery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).accordion( "widget" ); 


事件 


activate( event, ui ) 


类 型 : accordionactivate 


描述 : 面板 被 激活 后 触发 〈 在 动画 完成 之 后 ) o WR accordion LAE bg, n 
ui.oldHeader 和 ui.oldPanel 将 是 空 的 jQuery 对 象 。 如 果 accordion 正在 
tt#, n] ui.newHeader 和 ui.newPanel 将 是 空 的 jQuery 对 象 。 


注意 : 由 于 activate 事件 只 有 在 面板 激活 时 才能 触发 ， 当 创建 accordion 部 件 
时 ， 最 初 的 面板 不 会 触发 该 事件 。 如 果 您 需要 一 个 用 于 部 件 创建 的 钧 ， 请 使 用 
Create 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o newHeader 类 型 : jQuery 描述 : 刚 被 激活 的 标题 。 
o oldHeader 类 型 : jQuery 描述 : 刚 被 取消 激活 的 标题 。 
o newPanel 类 型 : jQuery 描述 : 刚 被 激活 的 面板 。 
o oldPanel 类 型 jQuery 描述 : 刚 被 取消 激活 的 面板 。 
代码 实例 : 


初始 化 带 有 指定 activate 回调 的 accordion : 


$( ".selector" ).accordion({ 
activate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 accordionactivate 事件 : 


$( ".selector" ).on( "accordionactivate", function( event, ui ) {} 





beforeActivate( event, ui ) 


类 型 : accordionbeforeactivate 


描述 : 面板 被 激活 前 直接 触发 。 可 以 取消 以 防止 面板 被 激活 。 如 果 accordion 当前 
是 折 受 的 ， 则 ui.oldHeader 和 ui.oldPanel 将 是 空 的 jQuery 对 象 。 如 果 
accordion E} Æ, W| ui.newHeader 和 ui.newPanel 将 是 空 的 jQuery 对 


象 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o newHeader 类 型 : jQuery 描述 : 将 被 激活 的 标题 。 
o oldHeader 类 型 : jQuery 描述 : 将 被 取消 激活 的 标题 。 


o newPanel 类 型 : jQuery 描述 : 将 被 激活 的 面板 。 
o oldPanel 类 型 jQuery 描述 : 将 被 取消 激活 的 面板 。 


代码 实例 : 
初始 化 带 有 指定 beforeActivate 回调 的 accordion : 


$( ".selector" ).accordion({ 
beforeActivate: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 accordionbeforeactivate 事件 : 


$( ".selector" ).on( "accordionbeforeactivate", function( event, u: 
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create( event, ui ) 


类 型 : accordioncreate 


描述 : 4 4) accordion 时 触发 。 如 果 accordion 是 折 和 县 的 ， ui.header 和 
ui.panel 将 是 空 的 jQuery 对 象 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o header 类 型 : jQuery 描述 : 激活 的 标题 。 
o panel 类 型 jQuery 描述 : 激活 的 面板 。 
代码 实例 : 


初始 化 带 有 指定 create 回调 的 accordion : 


$( ".selector" ).accordion({ 
create: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 accordioncreate 事件 : 


$( ".selector" ).on( "accordioncreate", function( event, ui ) {} )， 


| 


实例 


一 个 简单 的 jQuery UI Hr mik (Accordion) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<tit1le> 折 有 又 面板 部 件 (Accordion Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="accordion"> 
<h3> 部 分 1</h3> 
<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. 
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, 
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. 
Nam mi. Proin viverra leo ut odio.</p> 
</div> 
<h3> 部 分 2</h3> 
<div> 
<p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus 
Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, 
faucibus interdum tellus libero ac justo.</p> 
</div> 
<h3> 部 分 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 
Quisque lobortis.Phasellus pellentesque purus in massa.</p> 
<ul> 
<li>List item one</1li> 
<li>List item two</li> 
<li>List item three</li> 
</ul> 
</div> 
</div> 


<script> 
$( "#accordion" ).accordion(); 
</script> 


</body> 
</html> 
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jQuery UI API - 目 动 完成 部 件 (Autocomplete 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 


描述 : 自动 完成 功能 根据 用 户 输 入 值 进行 搜索 和 过 小 ， 让 用 户 快速 找到 并 从 预 设 值 
列表 中 选择 。 


版 本 新 增 : 1.8 


任何 可 以 接收 输入 的 字段 都 可 以 转换 为 Autocomplete， 即 ， &lt;input&gt; 元 
素 ， &lt;textarea&gt; 元 素 及 带 有 contenteditable 属性 的 元 素 。 


通过 给 Autocomplete 字段 焦点 或 者 在 其 中 输入 字符 ， 插 件 开 始 搜索 匹配 的 条 目 并 
显示 供 选择 的 值 的 列表 。 通 过 输入 更 多 的 字符 ， 用 户 可 以 过 滤 列表 以 获得 更 好 的 匹 
配 。 


该 部 件 可 用 于 选择 先前 选 定 的 值 ， 比 如 输入 文章 标签 或 者 输入 从 地 址 筹 中 输入 地 址 
邮件 地 址 。Autocomplete 也 可 以 用 来 填充 相关 的 信息 ， 比 如 输入 一 个 城市 的 名 称 来 
获得 该 城市 的 邮政 编码 。 


您 可 以 从 本 地 源 或 者 远程 源 获取 数据 : 本 地 源 适 用 于 小 数据 集 ， 例 如 ， 带 有 50 个 
条 目的 地 址 簿 ; 远程 源 适 用 于 大 数据 集 ， 上 比如 ， 带 有 数 百 个 或 者 成 千 上 万 个 条 目的 
数据 库 。 如 需 了 解 更 多 有 关 自 定义 数据 源 的 信息 ， 请 查看 source 选项 的 文档 。 


键盘 交互 
当 菜 单打 开 时 ， 下 面 的 键盘 命令 可 用 : 
e UP - 移动 焦点 到 上 一 个 项 目 。 如 果 在 第 一 个 项 目 上 ， 则 移动 焦点 到 输入 
(input) 。 如 果 在 输入 (input) 上 ， 则 移动 焦点 到 最 后 一 个 项 目 。 
e DOWN - 移动 焦点 到 下 一 个 项 目 。 如 果 在 最 后 一 个 项 目 上 ， 则 移动 焦点 到 输入 
(input) 。 如 果 在 输入 (input) 上 ， 则 移动 焦点 到 第 一 个 项 目 。 
e ESCAPE - 关闭 菜单 。 
e ENTER - 选择 当前 获得 焦点 的 项 目 ， 并 关闭 菜单 。 
e TAB - 选择 当前 获得 焦点 的 项 目 ， 关 闭 菜单 ， 并 移动 焦点 到 下 一 个 可 聚焦 


(focusable) 的 元 素 。 
e PAGE UP/DOWN - 滚动 一 屏 的 项 目 (基于 菜单 的 高 度 ) 。 


SRAKA, FAREMA AMH : 


e UP/DOWN - 如 果 满 足 minLength ， 则 打开 菜单 。 


主题 化 


自动 完成 部 件 (Autocomplete Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 
和 感 观 的 样式 。 如 果 需 要 使 用 自动 完成 部 件 指 定 的 样式 ， 则 可 以 使 用 下 面 的 CSS 
class 名 称 : 


e ui-autocomplete : 用 于 显示 匹配 用 户 的 菜单 (menu) 
e ui-autocomplete-input : 自动 完成 部 件 (Autocomplete Widget) 实例 化 
的 input 元 素 。 


依赖 


Ul 核心 (UI Core) 

部 件 库 (Widget Factory) 
定位 (Position) 
菜单 部 件 (Menu Widget) 


附加 说 明 


e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定 义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 

e 该 部 件 以 编程 方式 操作 元 素 的 值 ， 因 此 当 元 素 的 值 改 变 时 不 会 触发 原生 的 
change 事件 。 


快速 导航 


选项 


appendToautoFocusdelaydisabledminLengthpositionsource | closedestroydisak 


appendTo 
X 8! : Selector 


描述 : 菜单 应 该 被 附加 到 哪 一 个 元 素 。 当 该 值 为 null 时 ， 输 入 域 的 父 元 素 将 检 
查 ui-front class。 如 果 找 到 带 有 ui-front class 的 元 素 ， 菜 单 将 被 附加 到 


该 元 素 。 如 果 未 找到 带 有 ui-front class 的 元 素 ， 不 管 值 为 多 少 ， 菜 单 将 被 附 
加 到 body。 


注意 : 当 建 议 菜单 打开 时 ， appendTo 选项 不 应 改变 。 
代码 实例 : 


初始 化 带 有 指定 appendTo 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ appendTo: "#someElem" }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 











// getter 

var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" 

// setter 

$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" ), 
| = a | 
默认 值 : null 
autoFocus 


类 型 : Boolean 
描述 : 如 果 设 置 为 true ， 当 菜单 显示 时 ， 第 一 个 条 目 将 自动 获得 焦点 。 
代码 实例 : 


初始 化 带 有 指定 autoFocus 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ autoFocus: true }); 


在 初始 化 后 ， 获 取 或 设置 autofocus 选项 : 


// getter 
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocu: 


// setter 
$( ".selector" ).autocomplete( "option", "autoFocus", true ); 


OO == 一 一 


默认 值 : false 





delay 


类 型 : Integer 


描述 : 按键 和 执行 搜索 之 间 的 延迟 ， 以 宫 秒 计 。 对 于 本 地 数据 ， 采 用 需 延 迟 是 有 意 
义 的 〈 更 具 响 应 性 ) ， 但 对 于 远程 数据 会 产生 大 量 的 负荷 ， 同 时 降低 了 响应 性 。 


代码 实例 : 


初始 化 带 有 指定 delay 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ delay: 500 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).autocomplete( "option", "delay" ); 


// setter 
$( ".selector" ).autocomplete( "option", "delay", 500 ); 


默认 值 : 300 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 autocomplete, 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).autocomplete( "option", "disabled" 


// setter 
$( ".selector" ).autocomplete( "option", "disabled", true ); 


默认 值 : false 





minLength 


类 型 : Integer 


描述 : 执行 搜索 前 用 户 必 须 输入 的 最 小 字符 数 。 对 于 仅 带 有 几 项 条 目的 本 地 数据 ， 
通常 设置 为 需 ， 但 是 当 单个 字符 搜索 会 匹配 几 王 项 条 目 时 ， 设 置 个 高 数值 是 很 有 必 
要 的 。 


代码 实例 : 


初始 化 带 有 指定 minLength 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ minLength: © }); 


在 初始 化 后 ， 获 取 或 设置 minLength 选项 : 


// getter 
var minLength = $( ".selector" ).autocomplete( "option", "minLengtl 


// setter 
$( ".selector" ).autocomplete( "option", "minLength", © ); 





默认 值 : 1 


position 
类 型 : Object 


描述 : 标识 建议 菜单 的 位 置 与 相关 的 input 元 素 有 关系 。 of 选项 默认 为 input 元 
素 ， 但 是 您 可 以 指定 另 一 个 定位 元 素 。 如 需 了 解 各 种 选项 的 更 多 细节 ， 请 查看 
jQuery UI 定位 (Position) 。 


代码 实例 : 


初始 化 带 有 指定 position 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ position: { my : "right top", at: 
E EE] 


在 初始 化 后 ， 获 取 或 设置 position 选项 : 





// getter 
var position = $( ".selector" ).autocomplete( "option", "position" 
// setter 
$( ".selector" ).autocomplete( "option", "position", ( my : "right 
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默认 值 : { my: "left top", at: "left bottom", collision: "none" } 


source 


类 型 : Array 或 String 或 Function( Object request, Function response( Object 
data ) ) 


描述 : 定义 要 使 用 的 数据 ， 必 须 指 定 。 


独立 于 您 要 使 用 的 变量 ， 标 签 总 是 被 视 为 文本 。 如 果 您 想 要 标签 被 视 为 n ka i 
以 使 用 Scott González html 扩展 。 演 示 侧 重 于 source 选项 的 不 同 变量 - 您 
以 查找 其 中 匹配 您 的 使 用 情况 的 那个 ， 并 查看 相关 代码 。 


支持 多 个 类 型 : 


e Array : 可 用 于 本 地 数据 的 一 个 数组 。 支 持 两 种 格式 : 
o 字符 串 数 组 : [ "Choicei", "Choice2" | 
o 带 有 label 和 value 属性 的 对 象 数 
组 : [ { label: "Choicei", value: "valuei" }, ... ] label 属性 
显示 在 建议 菜单 中 。 当 用 户 选 择 一 个 条 目 时 ，value 将 被 插入 到 input 元 素 
中 。 如 果 只 是 指定 了 一 个 属性 ， 则 该 属性 将 被 视 为 label 和 value， 例 如 ， 
如 果 您 只 提供 了 value BMY, value 也 会 被 视 为 标签 。 
e String : 当 使 用 一 个 字符 串 ，Autocomplete 插件 希望 该 字符 串 指向 一 个 能 返回 
JSON 数据 的 URL 资源 。 它 可 以 是 在 相同 的 主机 上 ， 也 可 以 是 在 不 同 的 主机 
上 (必须 提供 JSONP) 。Autocomplete 插件 不 过 滤 结 果 ， 而 是 通过 一 个 
term 字段 添加 了 一 个 查询 字符 串 ， 用 于 服务 器 端 脚本 过 滤 结果 。 例 如 ， 如 
果 source 选项 设置 为 "http://example.com" ， 且 用 户 键入 了 foo, 
GET 请 求 则 为 http://example.com?term=foo 。 数 据 本 身 的 格式 可 以 与 前 
面 描述 的 本 地 数据 的 格式 相同 。 
Function: 第 三 个 变量 ， 一 个 回调 画 数 ， 提 供 最 大 的 灵活 性 ， 可 用 于 连接 任何 
数据 源 到 Autocomplete. Eha EGAL E SE mDNER : 


o 一 个 request 对 象 ， 带 有 一 个 term 属性 ， 表 示 当 前 文本 输入 中 的 
值 。 例 如 ， 如 果 用 户 在 city AA "new yo" , W} Autocomplete term 
等 同 于 "new yo" , 

o 一 个 response EAR, HATER: 建议 给 用 户 的 数据 。 该 数据 
应 基于 被 提供 的 term 进行 过 滤 ， 且 可 以 是 上 面 描述 的 本 地 数据 的 任何 格 
式 。 用 于 在 请 求 期 间 提 供 自 定 义 source 回调 来 处 理 错 误 。 即 使 遇 到 错 
误 ， 您 也 必须 调用 response 回调 函数 。 这 就 确保 了 小 部 件 总 是 正确 的 
状态 。 

您 可 以 使 用 内 置 的 $.ui.autocomplete.escapeRegex 
会 接受 一 个 字符 串 参 数 ， 转 义 所 有 的 正则 表达 式 字 符 ， 让 结果 安全 地 
E new RegExp() o 


代码 实例 : 


初始 化 带 有 指定 source 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "Cc 
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在 初始 化 后 ， 获 取 或 设置 source 选项 : 


// getter 
var source = $( ".selector" ).autocomplete( "option", "source" ); 


// setter 
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", 
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默认 值 : none; must be specified 
方法 


close() 


类 型 : jQuery (plugin only) 


描述 : 关闭 Autocomplete 菜单 。 当 与 [search](#method-search) 方法 结合 使 
用 时 ， 可 用 于 关闭 打开 的 菜单 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 close 方法 : 


$( ".selector" ).autocomplete( "close" ) 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 autocomplete 功能 。 这 会 把 元 素 返回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).autocomplete( "destroy" ); 


disable() 
类 型 : jQuery (plugin only) 


描述 : 禁用 autocomplete. 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).autocomplete( "disable" ); 


enable() 

类 型 : jQuery (plugin only) 

描述 : & FH autocomplete. 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 enable 方法 : 


$( ".selector" ).autocomplete( "enable" ); 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 
var isDisabled = $( ".selector" ).autocomplete( "option", "disablec 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 autocomplete 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).autocomplete( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 autocomplete 选项 的 值 。 


e optionName 类 型 : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).autocomplete( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 autocomplete 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value x1. 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).autocomplete( "option", { disabled: true } ); 


search( [value ] ) 


类 型 : jQuery (plugin only) 


描述 : 触发 search 事件 ， 如 果 该 事件 未 被 取消 则 调用 数据 源 。 当 被 点 击 时 ， 可 
被 类 似 选择 框 按钮 用 来 打开 建议 。 当 不 带 参 数 调 用 该 方法 时 ， 则 使 用 当前 输入 的 
值 。 可 带 一 个 空 字符 串 和 minLength: 0 进行 调用 ， 来 显示 所 有 的 条 目 。 


e value 类 型 String 
代码 实例 : 
调用 search 方法 : 


$( ".selector" ).autocomplete( "search", "" ); 


widget() 
类 型 : jQuery 


描述 : 返回 一 个 包含 菜单 元 素 的 jQuery 对 象 。 虽 然 菜单 项 不 断 地 被 创建 和 销 
毁 。 菜 单元 素 本 身 会 在 初始 化 时 创建 ， 并 不 断 的 重复 使 用 。 


e. 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 widget 方法 : 


$( ".selector" ).autocomplete( "widget" ); 


自动 完成 部 件 (Autocomplete Widget) 通过 部 件 库 (Widget Factory) 创建 的 ， 
且 可 被 扩展 。 当 对 部 件 进 行 扩展 时 ， 您 可 以 重 载 或 者 添加 扩展 部 件 的 行为 。 下 面 提 
供 的 方法 作为 扩展 点 ， 与 上 面 列 出 的 插件 方法 具有 相同 的 API 稳定 性 。 如 需 了 解 
更 多 有 关 小 部 件 扩展 的 知识 ， 请 查看 通过 部 件 库 (Widget Factory) 扩展 小 部 件 . 


_renderltem( ul, item ) 


类 型 : jQuery 


描述 : Method that controls the creation of each option in the widget's menu. The 
method must create anew &lt;li&gt; element, append it to the menu, and 
return it. 


Note: At this time the &1t;ul&gt; element created must contain an 
&lt;a&gt; element for compatibility with the menu widget. See the example 
below. 


e ul X € : jQuery 描述 : 新 创建 的 &1t;1i&gt; 元 素 必 须 追 加 到 的 
&lt;ul&gt; Ro 
e item 类 型 : Object 


o label 类 型 : String 描述 : 条 目 显 示 的 字符 串 。 
o item 类 型 : String 描述 : 当 条 目 被 选中 时 插入 到 输入 框 中 的 值 。 


代码 实例 : 
添加 条 目 的 值 作为 &lt;li&gt; 上 的 data 属性 。 


_renderItem: function( ul, item ) { 
return $( "&lt;li&gt;" ) 
.attr( "data-value", item.value ) 
.append( $( "&lt;a&gt;" ).text( item.label ) ) 
.appendTo( ul ); 


_renderMenu( ul, items ) 


类 型 : jQuery (plugin only) 


描述 : 该 方法 负责 在 菜单 显示 前 调整 菜单 尺寸 。 菜 单元 素 可 通过 
this.menu.element 使 用 。 


e ul 类 型 : jQuery 描述 : 一 个 要 作为 小 部 件 的 菜单 使 用 的 空 的 &1t;ul&gt; 


INO 


e items 类 型 : Array 描述 : 一 个 数组 ， 数 组 元 素 为 匹配 用 户 输入 的 条 目 。 
条 目 是 二 个 带 有 label 和 value 属性 的 对 象 。 


代码 实例 : 
添加 一 个 CSS class 名 称 到 旧 的 菜单 项 。 
_renderMenu: function( ul, items ) { 
var that = this; 


$.each( items, function( index, item ) { 
that. renderItemData( ul, item ); 


}); 
$( ul ).find( "li:odd" ).addclass( "odd" ); 
} 


_resizeMenu() 


类 型 : jQuery (plugin only) 


描述 : 该 方法 负责 在 菜单 显示 前 调整 菜单 尺寸 。 菜 单元 素 可 通过 
this.menu.element 使 用 。 


。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
菜单 总 .是 显示 为 500 RRE & To 


_resizeMenu: function() { 
this.menu.element.outerWidth( 500 ); 


j 
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事件 


change( event, ui ) 


类 型 : autocompletechange 
描述 : 如 果 输 入 域 的 值 改 变 则 触发 该 事件 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o item 类 型 : Object 描述 : 从 菜单 中 选择 的 条 目 ， 否 则 属性 为 null. 
代码 实例 : 
初始 化 带 有 指定 change 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
change: function( event, ui ) {} 


3); 


线 定 一 个 事件 监听 器 到 autocompletechange 事件 : 


$( ".selector" ).on( "autocompletechange", function( event, ui ) (. 
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close( event, ui ) 


i 8! : autocompleteclose 
描述 : 当 菜 单 隐藏 时 触发 。 不 是 每 一 个 close 事件 都 伴随 着 change 事件 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 close 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
close: function( event, ux ) {} 


3); 


绑 定 一 个 事件 监听 器 到 autocompleteclose 事件 : 


$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} 





gl 
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create( event, ui ) 
类 型 : autocompletecreate 
描述 : 当 创 建 autocomplete 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 


初始 化 带 有 指定 create 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
create: function( event, ui ) (3 


3); 


线 定 一 个 事件 监听 器 到 autocompletecreate 事件 : 


$( ".selector" ) ,on( "autocompletecreate", function( event, ui ) (. 
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focus( event, ui ) 


类 型 : autocompletefocus 
描述 : 当 焦 点 移动 到 一 个 条 目 上 (Rt) 时 触发 。 默 认 的 动作 是 把 文本 域 中 的 值 
替换 为 获得 焦点 的 条 目的 值 ， 即 使 该 事件 是 通过 键盘 交互 触发 的 。 取 消 该 事件 会 阻 
止 值 被 更 新 ， 但 不 会 阻止 菜单 项 获得 焦点 。 
e event 类 型 Event 
e ui 类 型 : Object 
o item 类 型 : Object 描述 : 获得 焦点 的 条 目 。 


代码 实例 : 
初始 化 带 有 指定 focus 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
focus: function( event, ui ) (3 


I) 
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$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} 


E ES 











open( event, ui ) 
类 型 : autocompleteopen 
描述 : 当 打 开 建 议 菜单 或 者 更 新 建议 菜单 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 open 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
open: function( event, ui ) {} 


3); 


线 定 一 个 事件 监听 器 到 autocompleteopen 事件 : 


$( ".selector” ).on( "autocompleteopen", function( event, ui ) {} ` 





response( event, ui ) 


类 型 : autocompleteresponse 


描述 : 在 搜索 完成 后 菜单 显示 前 触发 。 用 于 建议 数据 的 本 地 操作 ， 其 中 自 定义 的 
source 选项 回调 不 是 必需 的 。 该 事件 总 是 在 搜索 完成 时 触发 ， 如 果 搜 索 无 结果 
或 者 禁用 了 Autocomplete， 导 致 菜单 未 显示 ， 该 事件 一 样 会 被 触发 。 
e event 类 型 : Event 
e ui 类 型 : Object 
o content 类 型 : Array 描述 : 包含 响应 数据 ， 且 可 被 修改 来 改变 显示 结 
果 。 该 数据 已 经 标准 化 ， 所 以 如 果 您 要 修改 数据 ， 请 确保 每 个 条 目 都 包含 
value 和 label 属性 。 
代码 实例 : 


初始 化 带 有 指定 response 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
response: function( event, ui ) {} 


3); 
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$( ".selector" ).on( "autocompleteresponse", function( event, ui ) 
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search( event, ui ) 


类 型 : autocompletesearch 


描述 : 在 搜索 执行 前 满足 minLength 和 delay 后 触发 。 如 果 取 消 该 事件 ， 则 
不 会 提交 请 求 ， 也 不 会 提供 建议 条 目 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 search 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
search: function( event, ui ) (3 


3); 


线 定 一 个 事件 监听 器 到 autocompletesearch 事件 : 


$( ".selector" ) ,on( "autocompletesearch", function( event, ui ) (. 
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select( event, ui ) 


类 型 : autocompleteselect 


描述 : 当 从 荣 单 中 选择 条 目 时 触发 。 默 认 的 动作 是 把 文本 域 中 的 值 蔡 换 为 被 选中 的 
条 目的 值 。 取 消 该 事件 会 阻止 值 被 更 新 ， 但 不 会 阻止 菜单 关闭 。 


e event 类 型 : Event 
e ui 类 型 : Object 
o item 类 型 : Object 描述 : 一 个 带 有 被 选项 的 label 和 value 属性 的 
对 象 。 


代码 实例 : 
初始 化 带 有 指定 select 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
select: function( event, ui ) {} 


3): 


线 定 一 个 事件 监听 器 到 autocompleteselect 事件 : 


$( ".selector" ) ,on( "autocompleteselect", function( event, ui ) (. 
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实例 


实例 1 : 
一 个 简单 的 jQuery Ul 自动 完成 (Autocomplete) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 自 动 完成 部 件 (Autocomplete Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«label for="autocomplete"> 选 择 一 个 编程 语言 : </label> 
<input id="autocomplete"> 


<script> 
$( "#autocomplete" ).autocomplete({ 
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp' 


3); 


«/script» 


«/body» 
«/html» 


eras 
实例 2 : 
使 用 自 定义 源 回调 来 匹配 条 件 的 开始 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 自 动 完 成 部 件 (Autocomplete Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«label for="autocomplete"> 选 择 一 个 编程 语言 : </label> 
<input id="autocomplete"> 


<script> 
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asi 
$( "#autocomplete" ).autocomplete({ 
source: function( request, response ) { 
var matcher = new RegExp( "A" + $.ui.autocomplete.escapel 
response( $.grep( tags, function( item )( 
return matcher.test( item ); 


ye 
} 
3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 按钮 部 件 (Button Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 可 主题 化 的 按钮 和 按钮 集合 。 
版 本 新 增 : 1.8 


按钮 部 件 (Button Widget) 加 强 了 标准 表单 元 素 的 功能 ， 比 如 按钮 (button) 、 输 
A (input) 、 锚 (anchor) , FHi&:4B At (hover) 和 激活 (active) 样式 来 主题 
化 按钮 。 


除了 基本 的 按钮 ， 单 选 按钮 和 复 选 框 (input 类 型 为 radio 和 checkbox) 也 可 以 转 
换 为 按钮 。 相 关 的 标签 (label) 设计 成 按钮 的 样式 ， 点 击 时 更 新 底层 的 输入 。 为 了 
能 正常 工作 ， 需 要 给 input 一 个 id 属性 ， 并 指向 标签 (label) 的 for 属性 。 
不 要 把 input 放 在 标签 (label) 内 ， 否 则 会 引起 可 访问 性 问题 。 


为 了 分 组 单 选 按钮 ，Button 也 提供 了 一 个 额外 的 小 部 件 ， 名 为 Buttonset。 
Buttonset 通过 选择 一 个 容器 元 素 (包含 单 选 按钮 ) 并 调用 .buttonset() 来 使 
用 。Buttonset 也 提供 了 可 视 化 分 组 ， 因 此 当 有 一 组 按钮 时 都 可 考虑 使 用 它 。 它 会 
选择 所 有 的 后 代 ， 并 对 它们 应 用 .button() 。 您 可 以 启用 和 禁用 一 个 按钮 集 ， 这 
将 会 启用 和 禁用 所 有 包含 的 按钮 。 销 毁 按钮 集会 调用 每 个 按钮 的 destroy Aik. 
对 于 分 组 的 单 选 按钮 和 复 选 框 按钮 ， 推 荐 使 用 带 有 legend 的 fieldset 来 提 
供 一 个 可 访问 的 分 组 标签 。 


当 使 用 一 个 类 型 为 button, submit 或 reset 的 input 时 ， 仅 限于 支持 纯 文 本 无 图 标 


主题 化 


按钮 部 件 (Button Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 按钮 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-button : 表示 按钮 的 DOM 元 素 。 该 元 素 会 根据 text 和 icons 选项 添加 
下 列 class 之 
— : ui-button-text-only 、 ui-button-icon-only 、 ui-button-icon 
ui-button-text-icons 。 
o ui-button-icon-primary : 用 于 显示 按钮 主要 图 标的 元 素 。 只 有 当主 
要 图 标 在 icons 选项 中 提供 时 才 呈 现 。 
o ui-button-text : 在 按钮 的 文本 内 容 周围 的 容器 。 


o ui-button-icon-secondary : 用 于 显示 按钮 的 次 要 图 标 。 只 有 当 次 要 
图 标 在 icons 选项 中 提供 时 才 呈 现 。 
e ui-buttonset : Buttonset 的 外 层 容器 。 


依赖 


e UI 核心 (UI Core) 
e 部 件 库 (Widget Factory) 


附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


快速 导航 
选项 方法 事件 


disablediconslabeltext destroydisableenableoptionrefreshwidget create 


disabled 

类 型 : Boolean 

描述 : 如 果 设 置 为 true ， 则 禁用 该 button, 
代码 实例 : 

初始 化 带 有 指定 disabled 选项 的 button : 


$( ".selector" ).button({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).button( "option", "disabled" ); 


// setter 
$( ".selector" ).button( "option", "disabled", true ); 


默认 值 : false 


icons 


类 型 : Object 


描述 : 要 显示 的 图 标 ， 包 括 带 有 文本 的 图 标 和 不 带 有 文本 的 图 标 (查看 text 3k 
项 ) 。 默 认 情 况 下 ， 主 图 标 显示 在 标签 文本 的 左边 ， 副 图 标 显 示 在 右边 。 显 示 位 置 
可 通过 CSS 进行 控制 。 


primary 和 secondary 属性 值 必须 是 图 标 class 名 称 ， 例 

Jl, "ui-icon-gear" 。 如 果 只 使 用 一 个 图 标 ， 则 

icons: f primary: "ui-icon-locked" } 。 如 果 使 用 两 个 图 标 ， 则 

icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" 


代码 实例 : 

初始 化 带 有 指定 icons 选项 的 button : 
$( ".selector" ).button({ icons: { primary: "ui-icon-gear", second: 

E — B 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 





// getter 
var icons = $( ".selector" ).button( "option", "icons" ); 


// setter 
$( ".selector" ).button( "option", "icons", { primary: "ui-icon-ge: 
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PRIMA : ( primary: null, secondary: null } 


label 
类 型 : String 


描述 : 要 显示 在 按钮 中 的 文本 。 当 未 指定 时 ( null ) ， 则 使 用 元 素 的 HTML 内 
容 ， 或 者 如 果 元 素 是 一 个 submit 或 reset 类 型 的 input 元 素 ， 则 使 用 它 的 value 
属性 ， 或 者 如 果 元 素 是 一 个 radio 或 checkbox 类 型 的 input 元 素 ， 则 使 用 相关 的 
label 元 素 的 HTML 内 容 。 


代码 实例 : 
初始 化 带 有 指定 label 选项 的 button : 


$( ".selector" ).button({ label: "custom label" 3); 


在 初始 化 后 ， 获 取 或 设置 label 选项 : 


// getter 
var label = $( ".selector" ).button( "option", "label" ); 


// setter 
$( ".selector" ).button( "option", "label", "custom label" ); 


默认 值 : null 


text 
类 型 : Boolean 


描述 : 是 否 显示 标签 。 当 设置 为 false 时 ， 不 显示 文本 ， 但 是 此 时 必须 启用 
icons 选项 ， 否 则 text 选项 将 被 忽略 。 


代码 实例 : 
初始 化 带 有 指定 text 选项 的 button : 


$( ".selector" ).button({ text: false }); 


在 初始 化 后 ， 获 取 或 设置 text 选项 : 
// getter 
var text = $( ".selector" ).button( "option", "text" ); 


// setter 
$( ".selector" ).button( "option", "text", false ); 


默认 值 : true 
方法 


destroy() 

类 型 : jQuery (plugin only) 

描述 : 完全 移 除 button 功能 。 这 会 把 元 素 返 回 到 它 的 预 初 始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 destroy 方法 : 


$( ".selector" ).button( "destroy" ); 


disable() 
i 8! : jQuery (plugin only) 
描述 : 禁用 button. 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 disable 方法 : 


$( ".selector" ).button( "disable" ); 


enable() 
类 型 : jQuery (plugin only) 
描述 : 启用 button, 

。 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 enable 方法 : 


$( ".selector" ).button( "enable" ); 


option( optionName ) 
类 型 : Object 
描述 : 获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionName 类 型 : String 描述 : 要 获取 的 选项 的 名 称 。 
代码 实例 : 
调用 该 方法 : 
var isDisabled = $( ".selector" ).button( "option", "disabled" ); 
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option() 

类 型 : PlainObject 

描述 : 获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 button 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 该 方法 : 


var options = $( ".selector" ).button( "option" ); 


option( optionName, value ) 
类 型 : jQuery (plugin only) 
描述 : 设置 与 指定 的 optionName 关联 的 button 选项 的 值 。 


e optionName 类 型 : String 描述 : 要 设置 的 选项 的 名 称 。 
e value 类 型 : Object 描述 : 要 为 选项 设置 的 值 。 


代码 实例 : 
调用 该 方法 : 


$( ".selector" ).button( "option", "disabled", true ); 


option( options ) 
类 型 : jQuery (plugin only) 
描述 : 为 button 设置 一 个 或 多 个 选项 。 
e options 类 型 : Object 描述 : 要 设置 的 option-value 对 。 
代码 实例 : 
调用 该 方法 : 


$( ".selector" ).button( "option", { disabled: true } ); 


refresh() 


类 型 : jQuery (plugin only) 


描述 : 刷新 按钮 的 视觉 状态 。 用 于 在 以 编程 方式 改变 原生 元 素 的 选中 状态 或 茜 用 状 
态 后 更 新 按钮 状态 。 


e 该 方法 不 接受 任何 参数 。 
代码 实例 : 
调用 refresh 方法 : 


$( ".selector" ).button( "refresh" ); 


widget() 

类 型 : jQuery 

描述 : 返回 一 个 包含 button 的 jquery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

代码 实例 : 

调用 widget 方法 : 


var widget = $( ".selector" ).button( "widget" ); 


事件 


create( event, ui ) 


类 型 : buttoncreate 
描述 : 4 6) 37240 button 时 触发 。 


e event 类 型 : Event 
e ui 类 型 : Object 


注意 ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
代码 实例 : 
初始 化 带 有 指定 create 回调 的 button : 


$( ".selector" ).button({ 
create: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 buttoncreate 事件 : 


$( ".selector" ).on( "buttoncreate", function( event, ui ) {} ); 


实例 


实例 1 : 
一 个 简单 的 jQuery UI 按钮 (Button) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 按 钮 部 件 (Button Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button> 按 钮 标签 </button> 
<script> 
$( "button" ).button(); 


</script> 


</body> 
</html> 


E 一 一 
实例 2 : 
一 个 简单 的 jQuery UI 按钮 集 (Buttonset) 。 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 按 钮 部 件 (Button Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<form> 
«fieldset» 
<legend> 最 喜欢 的 jQuery 项 目 </legend> 
<div id="radio"> 
<input type="radio" id="sizzle" name="project"> 
<label for="sizzle">Sizzle</label> 


<input type="radio" id="qunit" name="project" checked="checke 
<label for="qunit">QUnit</label> 


<input type="radio" id="color" name="project"> 
«label for="color">Color</label> 
</div> 
</fieldset> 
</form> 


<script> 
$( "#radio" ).buttonset(); 
</script> 


</body> 
</html> 
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jQuery UI API -日 期 选择 器 部 件 (Datepicker 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 从 弹出 框 或 内 联 日 历 选择 一 个 日 期 。 
版 本 新 增 : 1.0 


jQuery UI 日 期 选择 器 (Datepicker) 是 向 页 面 添加 日 期 选择 功能 的 高 度 可 配置 插 
件 。 您 可 以 自 定 义 日 期 格式 和 语言 ， 限 制 可 选择 的 日 期 范围 ， 添 加 按钮 和 其 他 导航 
选项 。 


默认 情况 下 ， 当 相关 的 文本 域 获得 焦点 时 ， 在 一 个 小 的 覆盖 层 打开 日 期 选择 器 。 对 
于 一 个 内 联 的 日 历 ， 只 需 简单 地 将 日 期 选择 器 附加 到 div 或 者 span 上 。 


键盘 交互 
当日 期 选择 器 打开 时 ， 下 面 的 键盘 命令 可 用 : 


PAGE UP : 移 到 上 一 个 月 。 

PAGE DOWN : 移 到 下 一 个 月 。 
CTRL+PAGE UP : 移 到 上 一 年 。 
CTRL+PAGE DOWN : 移 到 下 一 年 。 
CTRL+HOME : 移 到 当前 月 份 。 如 果 日 期 选择 器 是 关闭 的 则 打开 。 
CTRL+LEFT : 移 到 上 一 天 。 

CTRL+RIGHT : 移 到 下 一 天 。 
CTRL+UP : 移 到 上 一 周 。 

CTRL+DOWN : 移 到 下 一 周 。 

ENTER : 选择 聚焦 的 日 期 。 
CTRL+END : 关闭 日 期 选择 器 ， 并 清除 日 期 。 
ESCAPE : 关闭 日 期 选择 器 ， 不 做 任何 选择 。 


实用 功能 
$.datepicker.setDefaults( settings ) 
为 所 有 的 日 期 选择 器 改变 默认 设置 。 


使 用 option() 方法 来 改变 个 别 实 例 的 设置 。 
代码 实例 : 
设置 所 有 的 日 期 选择 器 在 获得 焦点 时 或 点 击 图 标 时 打开 。 


$.datepicker.setDefaults({ 
showOn: "both", 
buttonImageOnly: true, 
buttonImage: "calendar.gif", 
buttonText: "Calendar" 


3); 
设置 所 有 的 日 期 选择 器 都 有 法 语文 本 。 


$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); 


$.datepicker.formatDate( format, date, settings ) 


格式 化 日 期 为 一 个 带 有 指定 格式 的 字符 串 值 。 
格式 可 以 是 下 列 组 合 : 


e d -一 月 中 的 第 几 天 CRABS) 

e dd- 一 月 中 的 第 几 天 《两 位 数 ) 

e 0 - 一 年 中 的 第 几 天 CRASS) 

e 00 - 一 年 中 的 第 几 天 (三 位 数 ) 

e D - 天 的 短 名 称 

e DD - 天 的 长 名 称 

e nm -一 年 中 的 第 几 月 (没有 前 导 规 ) 

e mm -一 年 中 的 第 几 月 (两 位 数 ) 

e M- 月 的 短 名 称 

e MM - 月 的 长 名 称 

ey- 年 (两 位 数 ) 

e yy - 年 (四 位 数 ) 

e @ -Unix 时 间 惟 (ms since 01/01/1970) 
e !- Windows 钟表 (100ns since 01/01/0001) 
e. -文本 

e "- 35/5 

e 其 他 - 文本 


也 有 一 些 $.datepicker 预定 义 的 标准 日 期 格式 : 


e ATOM - 'yy-mm-dd' (4 RFC 3339/ISO 8601 相同 ) 
e COOKIE - 'D, dd M yy' 

e |SO 8601 - 'yy-mm-dd' 

e RFC_822-'D,dMy' (参照 RFC 822) 

e RFC 850 -'DD, dd-M-y' (参照 RFC 850) 


RFC_1036-'D,dMy' (参照 RFC 1036) 
RFC_1123-'D,dMyy' (参照 RFC 1123) 
RFC_2822-'D,dMyy' (参照 RFC 2822) 
RSS -'D,dMy' (4 RFC 822 相同 ) 
TICKS - 

TIMESTAMP - '@' 

W3C - 'yy-mm-dd' (4 ISO 8601 相同 ) 


代码 实例 : 
以 ISO 格式 显示 日 期 。 产 生 "2007-01-26", 


$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) ), 
DS SSS. Sa ee 
以 扩展 法 语 格式 显示 日 期 。 产 生 "Samedi, Juillet 14,2007". 


$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, 
dayNames: $.datepicker.regional[ "fr" ].dayNames, 
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, 
monthNames: $.datepicker.regional[ "fr" ].monthNames 


3); 





$.datepicker.parseDate( format, value, settings ) 


从 一 个 指定 格式 的 字符 串 值 中 提取 日 期 。 
格式 可 以 是 下 列 组 合 : 


d - 一 月 中 的 第 几 天 (没有 前 导 雾 ) 

dd -一 月 中 的 第 几 天 (两 位 数 ) 

0 - 一 年 中 的 第 几 天 (没有 前 导 雾 ) 

oo -一 年 中 的 第 几 天 (三 位 数 ) 

D - 星期 几 的 短 名 称 

DD - 星期 几 的 长 名 称 

m - 一 年 中 的 第 几 月 CRASS) 

mm - 一 年 中 的 第 几 月 (两 位 数 ) 

M - 月 的 短 名 称 

MM - 月 的 长 名 称 

y -年 《两 位 数 ) 

yy - 年 《四 位 数 ) 

@ - Unix 时 间 玲 (ms since 01/01/1970) 
! - Windows 钟表 (100ns since 01/01/0001) 
'..' -文本 

"- 单 引号 


e 其 他 - 文本 
一 些 可 能 被 抛 出 的 异常 : 


e ‘Invalid arguments' - 如 果 格 式 或 值 为 空 则 抛 出 此 异常 。 

e 'Missing number at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 数值 则 抛 出 此 异 
常 。 

e 'Unknown name at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 星期 几 名 称 或 月 
份 名 称 则 抛 出 此 异常 。 

e 'Unexpected literal at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 文本 值 则 抛 出 


此 异常 。 
e ‘Invalid date’ - 如 果 日 期 无 效 则 抛 出 此 异常 ， 上 比如 '31/02/2007'。 
代码 实例 : 


提取 一 个 ISO 格式 的 日 期 。 


$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" ); 


提取 一 个 扩展 法 语 格式 的 日 期 。 


$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", 
shortYearCuroff: 20, 
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, 
dayNames: $.datepicker.regional[ "fr" ].dayNames, 
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, 
monthNames: $.datepicker.regional[ "fr" ].monthNames 


3): 
Ej = S 





$.datepicker.iso8601Week( date ) 

确定 一 个 给 定 的 日 期 在 一 年 中 的 第 几 周 : 1 到 53, 

该 函数 使 用 ISO 8601 定义 一 周 : 一 周 从 星期 一 开始 ， 每 一 年 的 第 一 周 包含 1 月 4 
日 。 这 意味 着 上 一 年 至 多 有 三 天 可 能 包含 在 当年 的 第 一 周 中 ， 当 年 至 多 有 三 天 可 能 
包含 在 上 一 年 的 最 后 一 周 中 。 

WB calculateweek 选项 的 默认 实现 。 

代码 实例 : 

查找 日 期 在 一 年 中 的 第 几 周 。 


$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) ); 


$.datepicker.noWeekends 


i240 beforeShowDay 函数 ， 防 止 选择 周末 。 


我 们 可 以 在 beforeShowDay 选项 中 提供 noweekends() 男 数 ， 用 来 计算 所 有 
工作 日 ， 提 供 一 个 true / false 值 的 数组 ， 用 来 指示 日 期 是 否 可 选择 。 


代码 实例 : 
设置 DatePicker， 让 周末 不 可 选 。 


$( "#datepicker" ).datepicker({ 
beforeShowDay: $.datepicker.noWeekends 


3); 


局 限 


日 期 选择 器 提供 了 迎合 不 同 的 语言 和 日 期 格式 本 地 化 内 容 的 支持 。 每 个 本 地 化 包含 
在 名 称 后 追加 语言 代码 的 文件 中 ， 例 如 法 语 为 jquery.ui.datepicker-fr.js o 
所 需 的 本 地 化 文件 需要 包含 在 主要 的 日 期 选择 器 代码 后 面 。 每 个 本 地 化 文件 添加 了 
它 自己 的 设置 到 可 用 的 本 地 化 集合 中 ， 所 有 实例 自动 应 用 这 些 设 置 为 默认 设置 。 


$.datepicker.regional 属性 保存 了 一 个 本 地 化 数组 ， 以 语言 代码 作为 前 置 
默认 前 置 为 "" ， 表 示 英 语 。 每 个 条 目 是 一 个 带 有 下 列 属性 的 对 

象 : closeText 、 prevText 、 nextText 、 currentText 、 monthNames 、 
monthNamesShort 、 dayNames 、 dayNamesShort 、 dayNamesMin 、 weekH 
、 dateFormat 、 firstDay 、 isRTL 、 showMonthAfterYear 和 
yearSuffix 。 


您 可 以 通过 下 面 代码 恢复 默认 的 本 地 化 : 


$.datepicker.setDefaults( $.datepicker.regional[ "" ] ); 


您 可 以 通过 下 面 代 码 履 盖 一 个 特定 地 点 的 日 期 选择 器 : 
$( selector ).datepicker( $.datepicker.regional[ "fr" ] ); 


主题 化 


日 期 选择 器 部 件 (Datepicker Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 
如 果 需 要 使 用 日 期 选择 器 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS 
class 名 称 


e ui-datepicker :日 期 选择 器 的 外 层 容 器 。 如 果 日 期 选择 器 是 内 联 的， 该 元 
素 会 另外 带 有 一 个 ui-datepicker-inline class。 如 果 设 置 了 isRTL 选 
项 ， 该 元 素 会 另外 带 有 一 个 ui-datepicker-rtl class, 

o ui-datepicker-header :日 期 选择 器 的 头 部 容器 。 
m Ui-datepicker-prev : 用 于 选择 上 一 月 的 控件 。 
m Ui-datepicker-next : 用 于 选择 下 一 月 的 控件 。 
= ui-datepicker-title :日 期 选择 器 包含 月 和 年 的 标题 容器 。 


= Ui-datepicker-month : 月 的 文本 显示 ， 如 果 设 置 了 
changeMonth 选项 则 显示 &lt;select&gt; 元 素 。 
= Ui-datepicker-year : 年 的 文本 显示 ， 如 果 设 置 了 
changeYear 选项 则 显示 &lt;select&gt; 元 素 。 
o ui-datepicker-calendar : 包含 日 历 的 表格 。 
= ui-datepicker-week-end : 周末 的 单元 格 。: Cells containing 
weekend days. 
m Ui-datepicker-other-month :发生 在 某 月 但 不 是 当前 月 天 数 的 
单元 格 。 
@ Ui-datepicker-unselectable : 用 户 不 可 选择 的 单元 格 。 
w Ui-datepicker-current-day :已 选中 日 期 的 单元 格 。 
= ui-datepicker-today : 当天 日 期 的 单元 格 。 
o ui-datepicker-buttonpane : 当 设 置 showButtonPanel 选项 时 使 
用 按钮 面板 (buttonpane) 。 
m Ui-datepicker-current : 用 于 选择 当天 日 期 的 按钮 。 


如 果 numberOfMonths 选项 用 于 显示 多 个 月 份 ， 则 使 用 一 些 额外 的 class : 


e ui-datepicker-multi :一 个 多 月 份 日 期 选择 器 的 最 外 层 容器 。 该 元 素 会 根 
据 要 显示 的 月 份 个 数 另外 带 有 
ui-datepicker-multi-2 、 ui-datepicker-multi-3 或 
ui-datepicker-multi-4 class 名 称 。 
o ui-datepicker-group : 分 组 内 单独 的 选择 器 。 该 元 素 会 根据 它 在 分 组 
中 的 位 置 另 外 带 有 
ui-datepicker-group-first 、 ui-datepicker-group-middle 或 
ui-datepicker-group-last class 名 称 。 


依赖 

e UI 核心 (UI Core) 

e 特效 核心 (Effects Core) 【可 选 的 ; 4S showAnim 选项 一 起 使 用 时 ) 
附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 

e 该 部 件 以 编程 方式 操作 元 素 的 值 ， 因此 当 元 素 的 值 改变 时 不 会 触发 原生 的 
change 事件 。 

e 不 支持 在 &lt;input type-"date"&gt; 上 创建 日 期 选择 器 ， 因 为 会 造成 与 
本 地 选择 器 的 Ul 冲突 。 


实例 


一 个 简单 的 jQuery UI 日 期 选择 器 (Datepicker) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 日 期 选择 器 部 件 (Datepicker Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="datepicker"></div> 
<script> 
$( "#datepicker" ).datepicker(); 


</script> 


</body> 
</html> 


居于 





jQuery UI API - 对 话 框 部 件 (Dialog Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 在 一 个 交互 覆盖 层 中 打开 内 容 。 
版 本 新 增 : 1.0 


对 话 框 是 一 个 基 浮 窗口 ， 包 括 一 个 标题 栏 和 一 个 内 容 区 域 。 对 话 框 窗口 可 以 移动 ， 
重新 调整 大 小 ， 默 认 情 况 下 通过 'x' 图 标 关 闭 。 


如 果 内 容 长 度 超过 最 大 高 度 ， 一 个 滚动 条 会 自动 出 现 。 
一 个 底部 按钮 栏 和 一 个 半 透 明 的 模式 必 盖 层 是 常见 的 添加 选项 。 


焦点 

当 打 开 一 个 对 话 框 时 ， 焦 点 会 自动 移动 到 满足 下 面条 件 的 第 一 个 项 目 : 
1. 带 有 autofocus 属性 的 对 话 框 内 的 第 一 个 元 素 

2. 对 话 框 内 容 内 的 第 一 个 :tabbable 元 素 

3. 对 话 框 按钮 面板 内 的 第 一 个 :tabbable 元 素 

4. 对话 框 的 关闭 按钮 

5. 对 话 框 本 身 


当 打开 时 ， 对 话 框 部 件 (Dialog Widget) 确保 通过 tab 切换 对 话 框 内 元 素 间 的 焦 
点 ， 不 包括 对 话 框 外 的 元 素 。 模 态 对 话 框 防 止 鼠 标 用 户 点 击 对 话 框 外 的 元 素 。 


当 关 闭 对 话 框 时 ， 焦 点 自动 返回 到 之 前 对 话 框 打 开 时 获得 焦点 的 元 素 上 。 
隐藏 关闭 按钮 
在 一 些 情况 下 ， 您 可 能 想 要 隐藏 关闭 按钮 ， 例 如 ， 在 按钮 面板 中 已 经 有 一 个 关闭 按 


钮 的 情况 。 最 好 的 解决 方法 是 通过 CSS。 作 为 实例 ， 您 可 以 定义 一 个 简单 的 规则 ， 
比如 : 


.no-close .ui-dialog-titlebar-close { 
display: none; 


然后 ， 您 可 以 添加 no-close class 到 任意 的 对 话 框 ， 用 来 隐藏 关闭 按钮 : 


$( "#dialog" ).dialog({ 
dialogClass: "no-close", 
buttons: [ 


text: "OK", 
click: function() { 
$( this ).dialog( "close" ); 


3); 


主题 化 


对 话 框 部 件 (Dialog Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 
样式 。 如 果 需 要 使 用 对 话 框 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-dialog : 对 话 框 的 外 层 容器 。 

o ui-dialog-titlebar : 包含 对 话 框 标题 和 关闭 按钮 的 标题 栏 。 
= ui-dialog-title : 对 话 框 文本 标题 周转 的 容器 。 
m Ui-dialog-titlebar-close : 对 话 框 的 关闭 按钮 。 

o ui-dialog-content : 对 话 框 内 容 周 围 的 容器 。 这 也 是 部 件 被 实例 化 的 

元 素 。 

o ui-dialog-buttonpane : 包含 对 话 按钮 的 面板 。 只 有 当 设 置 了 
buttons 选项 时 才 呈 现 。 
= Ui-dialog-buttonset : 按钮 周围 的 容器 。 


此 外 ， 当 设置 了 modal 选项 时 ， 一 个 带 有 ui-widget-overlay class 名称 的 
元 素 被 追加 到 &lt;body&gt; o 


依赖 


Ul 核心 (UI Core) 

部 件 库 (Widget Factory) 

定位 (Position) 

按钮 部 件 (Button Widget) 

可 拖 搜 小 部 件 (Draggable Widget) 【可 选 的 ; 4S draggable 选项 一 起 

使 用 时 ) 

e 可 调整 尺寸 小 部 件 (Resizable Widget) (可 选 的 ; 当 和 与 resizable 选项 
一 起 使 用 时 ) 

e 特效 核心 (Effects Core) (PÉI; 44 show 和 hide 选项 一 起 使 用 

时 ) 


附加 说 明 


e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 
一 个 简单 的 jQuery Ul 对 话 框 (Dialog) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 对 话 框 部 件 (Dialog Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
«script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«button id="opener">#] F xtig#E</but ton> 
«div id="dialog" title=" 对 话 框 标题 "> 我 是 一 个 对 话 框 </div> 


<script> 
$( "#dialog" ).dialog(( autoOpen: false }); 
$( "#opener" ).click(function() { 
$( "#dialog" ).dialog( "open" ); 
3); 


«/script» 


«/body» 
«/html» 





jQuery UI API - 菜单 部 件 (Menu Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 带 有 鼠标 和 键 胡 交互 的 用 于 导航 的 可 主题 化 菜单 。 
版 本 新 增 : 1.9 


菜单 可 以 用 任何 有 效 的 标记 创建 ， 只 要 元 素 有 严格 的 父 / 子 关系 且 每 个 条 目 都 有 一 个 
锚 。 最 常用 的 元 素 是 无 序列 表 ( &lt;ul&gt; ) : 


«ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
<li><a href="#">Item 2«/a»«/li» 
<li><a href="#">Item 3</a> 
<ul> 
<li><a href="#">Item 3-1«/a»«/li» 
<li><a href="#">Item 3-2«/a»«/li» 
<li><a href="#">Item 3-3«/a»«/li» 
<li><a href="#">Item 3-4«/a»«/li» 
<li><a href="#">Item 3-5«/a»«/li» 
</ul> 
</li> 
<li><a href="#">Item 4</a></li> 
<li><a href="#">Item 5«/a»«/li» 
</ul> 


如 果 使 用 一 个 非 &lt;ul&gt; / &1lt;li&gt; 的 结构 ， 为 菜单 和 菜单 条 目 使 用 相 
同 的 元 素 ， 请 使 用 menus 选项 来 区 分 两 个 元 素 ， 例 如 


menus: "div.menuElement" 。 


可 通过 向 元 素 添 加 ui-state-disabled class 来 禁用 任何 菜单 条 目 。 


标 
为 了 向 菜单 添加 图 标 ， 请 在 标记 中 包含 图 标 : 


<ul id="menu"> 
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</é 
</ul> 


«| E 








菜单 (Menu) 会 自动 向 无 图 标的 条 目 添加 必要 的 内 边 距 。 
分 陋 符 
分 隔 符 元 素 可 通过 包含 未 链接 的 菜单 条 目 来 创建 ， 荣 单条 目 只 能 是 空格 / 破 折 号 : 


«ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
«li»-«/li» 
<li><a href="#">Item 2«/a»«/li» 
</ul> 


REH 


ENTER/SPACE : 调用 获得 焦点 的 菜单 项 的 动作 ， 可 能 会 打开 一 个 子 菜单 。 
UP : 移动 教导 到 上 一 个 菜单 项 。 

DOWN : 移动 教导 到 下 一 个 菜单 项 。 

RIGHT : 如 果 可 用 ， 则 打开 子 菜单 。 

LEFT : 关闭 当前 子 菜单 ， 移 动 焦点 到 父 菜单 项 。 如 果 焦 点 不 在 子 菜单 上 ， 则 
不 进行 任何 操作 。 

e ESCAPE : 关闭 当前 子 菜单 ， 移 动 焦点 到 父 菜单 项 。 如 果 焦 点 不 在 子 菜单 上 ， 
则 不 进行 任何 操作 。 


输入 一 个 字母 ， 移 动 焦 点 到 以 该 字母 开头 的 第 一 个 条 目 。 重 复 相 同 的 字符 会 循环 显 
示 匹 配 的 条 目 。 在 一 个 时 间 内 输入 更 多 的 字符 则 匹配 所 输入 的 字符 。 


茶 用 项 可 获得 键盘 焦点 ， 但 是 不 允许 任何 交互 。 


主题 化 


菜单 部 件 (Menu Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 菜单 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 
e ui-menu : 菜单 的 外 层 容器 。 如 果菜 单 包含 图 标 ， 该 元 素 会 另外 带 有 一 个 
ui-menu-icons class, 
o Ui-menu-item : 单个 菜单 项 的 容器 。 
m Ui-menu-icon :通过 icons 选项 进行 子 菜单 图 标 设 置 。 
o Ui-menu-divider : 菜单 项 之 间 的 分 隔 符 元 素 。 


依赖 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 
e Zz (Position) 


附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指 定 的 CSS 文件 作为 起 点 。 


实例 


一 个 简单 的 jQuery Ul 菜单 (Menu) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 菜 单 部 件 (Menu Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<style> 
.ui-menu { 
width: 200px; 
} 
</style> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script srcz"//code.jquery.com/ui/1.10.4/jquery-ui.js"»«/script» 
«/head» 
«body» 


«ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
<li><a href="#">Item 2«/a»«/li» 
<li><a href="#">Item 3</a> 
<ul> 
<li><a href="#">Item 3-1«/a»«/li» 
<li><a href="#">Item 3-2«/a»«/li» 
<li><a href="#">Item 3-3«/a»«/li» 
<li><a href="#">Item 3-4</a></li> 
<li><a href="#">Item 3-5«/a»«/li» 
</ul> 
</li> 
<li><a href="#">Item 4</a></li> 
<li><a href="#">Item 5</a></li> 
</ul> 


<script> 
$( "#menu" ).menu(); 
</script> 


</body> 
</html> 
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jQuery UI API - 进度 条 部 件 (Progressbar 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 显示 一 个 确定 的 或 不 确定 的 进程 状态 。 
版 本 新 增 : 1.6 


进度 条 被 设计 来 显示 进度 的 当前 完成 百分比 。 进 度 条 通过 CSS 编码 灵活 调整 大 
小 ， 默 认 会 缩放 到 适应 父 容器 的 大 小 。 

一 个 确定 的 进度 条 只 能 在 系统 可 以 准确 更 新 当前 状态 的 情况 下 使 用 。 一 个 确定 的 进 
度 条 不 会 从 左 向 右 填充 ， 然 后 循环 回 到 空 - 如 果 不 能 计算 实际 状态 ， 则 使 用 不 确定 
的 进度 条 以 便 提供 用 户 反 馈 。 


主题 化 


进度 条 部 件 (Progressbar Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 
观 的 样式 。 如 果 需 要 使 用 进度 条 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 
e ui-progressbar : 进度 条 的 外 层 容 器 。 该 元 素 会 为 不 确定 的 进度 条 另外 添 
加 一 个 ui-progressbar-indeterminate class, 
o Ui-progressbar-value : 该 元 素 代表 进度 条 的 填充 部 分 。 
m ui-progressbar-overlay : 用 于 为 不 确定 的 进度 条 显示 动画 的 履 


=Æ B 
M/Z o 


依赖 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 


附加 说 明 


e 该 部 件 要求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 
一 个 简单 的 jQuery Ul 不 确定 的 进度 条 (Indeterminate Progressbar) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 进 度 条 部 件 (Progressbar Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="progressbar"></div> 


<script> 
$( "#progressbar" ).progressbar({ 
value: false 


3); 


«/script» 


«/body» 
«/html» 
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jQuery UI API - 滑 块 部 件 (Slider Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 拖 动 手柄 来 选择 一 个 数值 。 
版 本 新 增 : 1.5 


jQuery Ul 滑 块 (Slider) 插件 允许 通过 滑 块 进行 选择 。 有 各 种 不 同 的 选项 ， 比 如 多 
个 手柄 和 范围 。 手 柄 可 通过 最 标 或 箭头 按键 进行 移动 。 


滑 块 部 件 (Slider Widget) 会 在 初始 化 时 创建 带 有 class ui-slider-handle 的 
手柄 元 素 。 您 可 以 通过 在 初始 化 之 前 创建 并 追加 元 素 ， 同 时 向 元 素 添加 
ui-slider-handle class 来 指定 自 定义 的 手柄 元 素 。 它 只 会 创建 匹配 

value / values 长度 所 需 的 数量 的 手柄 。 例 如 ， 如 果 您 指定 

values: [ 1, 5, 18 ] ， 且 创建 一 个 自 定义 手柄 ， 插 件 将 创建 其 他 两 个 。 


主题 化 


滑 块 部 件 (Slider Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 滑 块 指 定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-slider : 滑 块 控件 的 轨道 。 该 元 素 会 根据 滑 块 的 orientation 另外 带 
有 一 个 ui-slider-horizontal 或 ui-slider-vertical class。 
o ui-slider-handle : 滑 块 手柄 。 
o ui-slider-range : 当 设 置 range 选项 时 使 用 的 已 选 范 围 。 如 果 
range 选项 设置 为 "min" 或 "max" ， 则 该 元 素 会 分 别 另 外 带 有 一 个 
ui-slider-range-min 或 ui-slider-range-max class。 


依赖 


UI fi. (UI Core) 
e 部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


附加 说 明 


e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 
一 个 简单 的 jQuery UI Æ} (Slider) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 滑 块 部 件 (Slider Widget) 演示 </title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/: 
<style>#slider { margin: 10px; } </style> 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="slider"></div> 
<script> 
$( "#slider" ).slider(); 


</script> 


</body> 
</html> 
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jQuery UI API - 旋转 器 部 件 (Spinner Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 通过 向 上 /向 下 按钮 和 箭头 键 处 理 ， 为 输入 数值 增强 文本 输入 功能 。 
版 本 新 增 : 1.9 


旋转 器 (Spinner) ， 或 数 步 进 控件 (number stepper widget) ， 是 用 于 处 理 各 种 
数字 输入 的 完美 控件 。 它 允许 用 户 直接 输入 一 个 值 ， 或 通过 键 瘟 、 鼠 标 、 滚 轮 旋 转 
改变 一 个 已 有 的 值 。 当 与 全 球 化 (Globalize) 结合 时 ， 您 甚至 可 以 旋转 显示 不 同 地 
区 的 货币 和 日 期 。 


旋转 器 (Spinner) 使 用 两 个 按钮 将 文本 输入 覆盖 为 当前 值 的 递增 值 和 递减 值 。 旋 
转 器 增加 了 按键 事件 ， 以 便 可 以 用 键盘 完成 相同 的 递增 和 递减 。 旋 转 器 代表 全 球 化 
(Globalize) 的 数字 格式 和 解析 。 


ht f A 


e UP: 对 值 增加 一 步 。 

e DOWN : 对 值 减少 一 步 。 

e PAGE UP: 对 值 增加 一 页 。 

e PAGE DOWN : 对 值 减少 一 页 。 


当 旋转 器 不 是 只 读 ( &lt;input readonly&gt; ) 时 ， 用 户 可 以 输入 值 ， 这 可 能 
会 产生 无 效 的 值 (小 于 最 小 值 ， 大 于 最 大 值 ， 增 减 错 配 ， 非 数字 输入 ) 。 当 增 减 
时 ， 不 管 通过 编程 方式 还 是 旋转 按钮 方式 ， 值 都 会 被 强制 为 一 个 有 效 值 (如 需 了 解 
详情 ， 请 查看 stepup() 和 stepDown() 的 描述 。 


主题 化 


旋转 器 部 件 (Spinner Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 
样式 。 如 果 需 要 使 用 旋转 器 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-spinner : 旋转 器 的 外 层 容 器 。 
o ui-spinner-input : 旋转 器 部 件 (Spinner Widget) 实例 化 的 
&lt;input&gt; 元 素 。 
o ui-spinner-button : 用 于 递增 或 递减 旋转 器 值 的 按钮 控件 。 向 上 按钮 


会 另外 带 有 一 个 ui-spinner-up class， 向 下 按钮 会 另外 带 有 一 个 


ui-spinner-down class, 


依赖 


UI 核心 (UI Core) 

部 件 库 (Widget Factory) 

按钮 部 件 (Button Widget) 

全 球 化 (Globalize) (外 部 的 ， 可 选 的 ; S5 culture 和 numberFormat 
选项 一 起 使 用 时 ) 


附加 说 明 


该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 

该 部 件 以 编程 方式 操作 元 素 的 值 ， 因 此 当 元 素 的 值 改 变 时 不 会 触发 原生 的 
change 事件 。 

不 支持 在 &lt;input type-"number"&gt; 上 创建 选择 器 ， 因 为 会 造成 与 本 
地 旋转 器 的 Ul 冲突 。 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset="utf-8"> 

<title> 旋 转 器 部 件 (Spinner Widget) 演示 </title> 

<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


</head> 
<body> 


«input id="Spinner"> 


<script> 
$( "#spinner" ).spinner(); 
«/script» 


«/body» 
«/html» 








jQuery UI API - 标签 页 部 件 (Tabs Widget) 


所 属 类 别 

小 部 件 (Widgets) 

用 法 

描述 : 一 种 多 面板 的 单 内 容 区 ， 每 个 面板 与 列表 中 的 标题 相关 。 
版 本 新 增 : 1.0 


标签 页 (Tabs) 通常 用 于 把 内 容 分 成 多 个 部 分 ， 以 便 节 省 空间 ， 就 像 折 生 面 板 
(accordion) 一 样 。 


标签 页 (Tabs) 有 一 组 必须 使 用 的 特定 标记 ， 以 便 标签 页 能 正常 工作 : 


e 标签 页 (Tabs) 必须 在 一 个 有 序 的 ( &lt;ol&gt; ) 或 无 序 的 
( &1t;ul&gt; ) 列表 中 

e 每 个 标签 页 的 "title" 必须 在 一 个 列表 项 ( &lt;li&gt; ) 的 内 部 ， 且 必须 用 一 
个 带 有 href 属性 的 锚 ( &lt;a&gt; ) x 

e 每 个 标签 页 面板 可 以 是 任意 有 效 的 元 素 ， 但 是 它 必 须 带 有 一 个 id， 该 id 与 相关 
标签 页 的 锚 中 的 哈 希 相对 应 。 


每 个 标签 页 面板 的 内 容 可 以 在 页 面 中 定义 好 ， 或 者 可 以 通过 Ajax 加 载 。 这 两 种 方 
式 都 是 基于 与 标签 页 相关 的 锚 的 href 上 自动 处 理 的 。 默 认 情 况 下 ， 标 签 页 在 点 
击 时 激活 ， 但 是 通过 event 选项 可 以 改变 或 覆盖 事件 。 


下 面 是 一 些 样品 标记 : 


<div id="tabs"> 
<ul> 
<li><a href="#fragment -1">—</a></1i> 
<li><a href="#fragment -2">—</a></1li> 
<li><a href="#fragment -3">=</a></1i> 
</ul> 
<div id="fragment-1"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed í 
«/div» 
«div id="fragment-2"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ( 
«/div» 
«div id="fragment-3"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ( 
«/div» 
«/div» 
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键盘 交互 
当 焦 点 在 标签 页 上 时 ， 下 面 的 键盘 命令 可 用 : 


e UP/LEFT : 移动 焦点 到 上 一 个 标签 页 。 如 果 在 第 一 个 标签 页 上 ， 则 移动 焦点 到 
最 后 一 个 标签 页 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 标签 页 。 

e DOWNRIGHT : 移动 焦点 到 下 一 个 标签 页 。 如 果 在 最 后 一 个 标签 页 上 ， 则 移 
动 焦点 到 第 一 个 标签 页 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 标签 页 。 

e HOME : 移动 焦点 到 第 一 个 标签 页 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 标签 


页 。 
e END: 移动 焦点 到 最 后 一 个 标签 页 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 标签 
页 。 


SPACE : 激活 与 获得 焦点 的 标签 页 相关 的 面板 。 

ENTER : 激活 或 切换 与 获得 焦点 的 标签 页 相关 的 面板 。 
ALT+PAGE UP : 移动 焦点 到 上 一 个 标签 页 ， 并 立即 激活 。 
ALT+PAGE DOWN : 移动 焦点 到 下 一 个 标签 页 ， 并 立即 激活 。 


当 焦 点 在 面板 上 时 ， 下 面 的 键盘 命令 可 用 : 


e CTRL*UP : 移动 焦点 到 相关 的 标签 页 。 
e ALT+PAGE UP: 移动 焦点 到 上 一 个 标签 页 ， 并 立即 激活 。 
e ALT+PAGE DOWN : 移动 焦点 到 下 一 个 标签 页 ， 并 立即 激活 。 


主题 化 


标签 页 部 件 (Tabs Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 标签 页 指定 的 祥 式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-tabs : 标签 页 的 外 层 容 器 。 当 设置 了 collapsible 选项 时 ， 该 元 素 会 
另外 带 有 一 个 ui-tabs-collapsible class. 


o ui-tabs-nav : 标签 页 列表 。 
m 导航 中 激活 的 列表 项 会 带 有 一 个 ui-tabs-active class。 内 容 通过 
Ajax 调用 加 载 的 列表 项 会 带 有 一 个 ui-tabs-loading class, 
w ui-tabs-anchor : 用 于 切换 面板 的 锚 。 
o ui-tabs-panel : 与 标签 页 相关 的 面板 。 只 有 和 与 其 对 应 的 标签 页 激活 时 
才 可 见 。 


依赖 


e Ul 核心 (UI Core) 

EM (Widget Factory) 

e 特效 核心 (Effects Core) (可 选 的 ; 4S show 和 hide 选项 一 起 使 用 
ay ) 


附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 


一 个 简单 的 jQuery Ul 标签 页 (Tabs) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


<title> 标 签 页 部 件 (Tabs Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
«script src="//code. jquery.com/jquery-1.10.2.js"></script> 


<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 


</head> 
<body> 


<div id="tabs"> 
<ul> 


<li><a href="#fragment -1"><span>—</span></a></1i> 
<li><a href="#fragment -2"><span>—</span></a></1i> 
<li><a href="#fragment -3"><span>=</span></a></1i> 


</ul> 
<div id="fragment-1"> 


<p> 第 一 个 标签 是 默认 激活 的 : </p> 


<code>$( "#tabs" ).tabs(); </code> 


</div> 

«div id="fragment-2"> 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 

</div> 

«div id="fragment-3"> 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 

</div> 

</div> 


<script> 
$( "#tabs" ).tabs(); 
</script> 


</body> 
</html> 
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jQuery UI API - 工具 提示 框 部 件 (Tooltip 
Widget) 


所 属 类 别 


小 部 件 (Widgets) 


用 法 
描述 : 可 自 定义 的 、 可 主题 化 的 工具 提示 框 ， 蔡 代 原 生 的 工具 提示 框 。 
版 本 新 增 : 1.9 


工具 提示 框 (Tooltip) 取代 了 原生 的 工具 提示 框 ， 让 它们 可 主题 化 ， 也 人 允许 进行 各 
种 自 定义 : 


e 显示 不 仅仅 是 标题 的 其 他 内 容 ， 就 如 内 联 的 脚注 或 通过 Ajax 检索 的 额外 内 
合 。 

e 自 定义 定位 ， 例 如 ， 在 元 素 上 居中 工具 提示 框 。 

。 添加 额外 的 样式 来 定制 警告 或 错误 区 域 的 外 观 。 


默认 使 用 一 个 渐变 的 动画 来 显示 和 隐藏 工具 提示 框 ， 这 种 外 观 与 简单 的 切换 可 见 度 
相 比 更 具 灵 性 。 这 可 以 通过 show 和 hide 选项 进行 定制 。 


items 和 content 选项 需要 保持 同步 。 如 果 您 改变 了 其 中 一 个 ， 您 需要 同时 改 
变 另 一 个 。 

在 一 般 情况 下 ， 禁 用 的 元 素 不 会 触发 任何 DOM 事件 。 因 此 ， 适 当地 控制 禁用 元 素 
的 工具 提示 框 是 不 可 能 的 ， 因 为 我 们 需要 监听 事件 来 决定 何 时 显示 和 隐藏 工具 提示 
框 。 这 就 导致 jQuery Ul 不 能 保证 对 附加 到 禁用 元 素 上 的 工具 提示 框 任何 层次 上 的 
支持 。 这 意味 着 如 果 您 需要 在 禁用 元 素 上 进行 提示 ， 您 可 能 需要 使 用 一 个 原生 的 提 
示 框 和 jQuery Ul 工具 提示 框 的 混合 物 。 


主题 化 
工具 提示 框 部 件 (Tooltip Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 
观 的 样式 。 如 果 需 要 使 用 工具 提示 框 指定 的 桩 式 ， 则 可 以 使 用 下 面 的 CSS class 名 
称 : 
e ui-tooltip : 工具 提示 框 的 外 层 容 器 。 
o Ui-tooltip-content : 工具 提示 框 的 内 容 。 


依赖 


UI 核心 (UI Core) 

部 件 库 (Widget Factory) 

定位 (Position) 

特效 核心 (Effects Core) (可 选 的 ; 44 show 和 hide 选项 一 起 使 用 
时 ) 


附加 说 明 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 
主题 ， 请 使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


实例 


属性 的 所 有 元 素 的 事件 代理 ， 在 文档 上 创建 一 个 工具 提示 框 
Tooltip) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 工 具 提 示 框 部 件 (Tooltip Widget) 演示 </title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/: 
<script src="//code. jquery.com/jquery-1.10.2.js"></script> 
<script src="//code. jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 
«a href="#" title=" jam" ></a> 
<input title=" 输 入 帮助 "> 

</p> 

<script> 
$( document ).tooltip(); 

«/script» 


«/body» 
«/html» 
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jQuery EasyUl 简介 


jQuery EasyUl 是 一 个 基于 jQuery 的 框架 ， 集 成 了 各 种 用 户 界 面 插件 。 
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什么 是 jQuery EasyUl 
jQuery EasyUl 框架 提供 了 创建 网 页 所 需 的 一 切 ， 帮 助 您 轻松 建立 站 点 。 


e easyui 是 一 个 基于 jQuery 的 框架 ， 集 成 了 各 种 用 户 界 面 插件 。 

e easyui 提供 建立 现代 化 的 具有 交互 性 的 V pae M, 

e 使 用 easyui， 您 不 需要 写 太 多 javascript 代码 ， 一 般 情 况 下 您 只 需要 使 用 一 些 
html 标记 来 定义 用 户 界面 。 

e HTML 网 页 的 完整 框架 。 

e easyui 节省 了 开发 产品 的 时 间 和 规模 。 

e easyui 非常 简单 ， 但 是 功能 非常 强大 。 
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jQuery EasyUl 下 载 


您 可 以 从 http://www.jeasyui.com/download/index.php 上 下 载 您 需要 的 jQuery 
EasyUl 版 本 。 


轻松 使 用 jQuery 和 HTML5 


jQuery EasyUl 提供 易于 使 用 的 组 件 ， 它 使 Web 开发 人 员 快 速 地 在 流行 的 jQuery 
核心 和 HTML5 上 建立 程序 页 面 。 这 些 功能 使 您 的 应 用 适合 今天 的 网 络 。 有 两 个 方 
法 声明 的 UI 组 件 : 


1. 直接 在 HTML 声明 组 件 。 
«div class="easyui-dialog" style="width: 400px; height :200px" 
data-options="title: 'My Dialog',collapsible:true,iconCls:'icon: 


dialog content. 
</div> 


5 —H& 
2. 编写 JavaScript 代码 来 创建 组 件 。 





<input id="cc" style="width:200px" /> 


$('#cc' ).combobox( { 
Mieke Rapin 
required: true, 
valueField: 'id', 
textField: 'text' 
3): 


jQuery EasyUl 应 用 


jQuery EasyUl 应 用 - 创建 CRUD 应 用 


数据 收集 并 妥善 管理 数据 是 网 络 应 用 共同 的 必要 。CRUD 人 允许 我 们 生成 页 面 列表 ， 
并 编辑 数据 库 记 录 。 本 教程 将 向 你 演示 如 何 使 用 jQuery EasyUl 框架 实现 一 个 
CRUD DataGrid。 


我 们 将 使 用 下 面 的 插件 : 


datagrid : 向 用 户 展示 列表 数据 。 
dialog : 创建 或 编辑 一 条 单一 的 用 户 信 息 。 
form : 用 于 提交 表单 数据 。 


messager : 显示 一 些 操 作 信 息 。 


步骤 1 : 准备 数据 库 
我 们 将 使 用 MySql 数据 库 来 存储 用 户 信息 。 创 建 数 据 库 和 'users' X. 










Inamel (000)000-0000 name 1@qmail.com 
Iname2 (000)000-0000 name2@qmail.com 





4 fname2 


5 fname3 Iname3 (000)000-0000 name3@qmail.com 
7 fname4 Iname4 (000)000-0000 name4@qmail.com 
8 fname5 Iname5 (000)000-0000 name5 gmail.com 
9 fname6 Iname6 (000)000-0000 name6 gmail.com 
10 fname7 Iname7 (000)000-0000 name7 &gmail.com 
11 fname8 Inames (000)000-0000 name8 @qmail.com 
12 fname9 Iname9 (000)000-0000 name3@qmail.com 
13 fname 10 Iname 10 (000)000-0000 name 10 @gmail.com 


步骤 2 : 创建 DataGrid 来 显示 用 户 信 息 
创建 没有 javascript 代码 的 DataGrid。 


«table id="dg" title="My Users" class-"easyui-datagrid" style="widt 
url="get_users.php" 
toolbar="#toolbar" 
rownumbers="true" fitColumns="true" singleSelect="true"> 


<thead> 
<tr> 
«th field-"firstname" width="50">First Name</th> 
«th field-"lastname" width="50">Last Name</th> 
<th field="phone" width="50">Phone</th> 
«th field-"email" width="50">Email</th> 
«/tr» 
</thead> 
</table> 


«div id="toolbar"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-add" plain: 
«a href="#" class="easyui-linkbutton" iconCls="icon-edit" plair 
«a href="#" class="easyui-linkbutton" iconCls="icon-remove" pl: 
</div> 
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我 们 不 需要 写 任何 的 javascript 代码 ， 就 能 向 用 户 显示 列表 ， 如 下 图 所 示 : 
My Users 


中 New User e Edit User (==) Resove User 





First Name Last Name Fhone Ezail 

1 fnamel lnazei (000) 000-0000 namel@gmail. com + 
2  fnaze2 lnaze2 (000) 000-0000 name2@gmail. com 

3 fname3 lnaze3 (000) 000-0000 naze36gzail. coz 

1 fname¢ lnaze4 (000) 000-0000 name4@gmail. com 3 
5 00) 000-0000 

6  fnaze6 lnaze6 (000) 000-0000 name6@gmail. com T 
7  fname? lnaze? (000) 000-0000 name7@gmail. com 

8 fname8 iname8 (000) 000-0000 nameS@email. com z 


DataGrid 使 用 'url' 属性 ， 并 赋值 为 "get _users.php'， 用 来 从 服务 器 检索 数据 。 
get_users.php 文件 的 代码 


$rs = mysql_query('select * from users'); 

$result = array(); 

while($row = mysql fetch object($rs))( 
array push($result, $row); 

} 


echo json_encode($result); 


步骤 3 : 创建 表单 对 话 框 


我 们 使 用 相同 的 对 话 框 来 创建 或 编辑 用 户 。 


«div id="dlg" class="easyui-dialog" style="width: 400px; height :280p> 
closed-"true" buttons="#d1lg-buttons"> 
<div class="ftitle">User Information</div> 
<form id="fm" method="post"> 
<div class="fitem"> 
<label>First Name:</label> 
«input name="firstname" class="easyui-validatebox" reqt 
</div> 
<div class="fitem"> 
<label>Last Name:</label> 
«input name="lastname" class="easyui-validatebox" requ: 
</div> 
<div class="fitem"> 
<label>Phone:</label> 
<input name="phone"> 
</div> 
<div class="fitem"> 
<label>Email:</label> 
«input name="email" class="easyui-validatebox" validTy; 
</div> 
</form> 
</div> 
<div id="dlg-buttons"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclicl 
«a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onc 
</div> 





这 个 对 话 框 已 经 创建 ， 也 没有 任何 的 javascript 代码 :。 
Edit User e 


User Information 


First Name: fname3 
Last Name: lname3 
Phone: (000) 000-0000 





address. 


Email: [name3@zmail| A $ Please enter a valid email 





y Save P4 Cancel 


步骤 4: 实现 创建 和 编辑 用 户 
当 创 建 用 户 时 ， 打 开 一 个 对 话 框 并 清空 表单 数据 。 


function newUser(){ 
$('#d1g').dialog('open').dialog('setTitle', 'New User'); 
$('#fm').form('clear'); 
url = 'save_user.php'; 


当 编 辑 用 户 时 ， 打 开 一 个 对 话 框 并 从 datagrid 选择 的 行 中 加 载 表 单数 据 。 


var row = $('#dg').datagrid('getSelected'); 

if (row){ 
$('£dlg').dialog('open').dialog('setTitle','Edit User'); 
$('#fm').form('load', row); 
url = 'update_user.php?id='+row.id; 


url 存储 着 当 保 存 用 户 数据 时 表单 回 传 的 URL 地 址 。 


步骤 5 : 保存 用 户 数据 
我 们 使 用 下 面 的 代码 保存 用 户 数据 : 


function saveUser()( 
$('#fm').form('submit', { 
url: url, 
onSubmit: function(){ 
return $(this).form('validate'); 
}, 
success: function(result) { 
var result = eval('('*result-*')'); 
if (result.errorMsg) { 
$.messager .show( { 
title: "Error, 
msg: result.errorMsg 
1); 
) else { 
$('#dlg').dialog('close'); // close the dia: 
$('4dg').datagrid('reload'); // reload the user 





提交 表单 之 前 ，'"onSubmit HARB, iÀRENAARHGEGR GE GETERER[A. HRS 
段 值 提交 成 功 ， 关 闭 对 话 框 并 重新 加 载 datagrid 数据 。 


步骤 6 : 删除 一 个 用 户 
我 们 使 用 下 面 的 代码 来 移 除 一 个 用 户 : 


function destroyUser(){ 
var row = $('#dg').datagrid('getSelected'); 


if (row){ 
$.messager.confirm('Confirm','Are you sure you want to des! 
if (r){ 
$.post('destroy user.php', (id:row.id), function(resi 
if (result.success)( 
$('#dg').datagrid('reload'); // reload 1 
} else { 
$.messager .show( { // show error message 
title: “Errors, 
msg: result.errorMsg 
3); 
3, json'); 
3): 
} 





My Users 
+ Ê Ed = 
First Name Last Name Phone Email 
1 fname inaze Ü E namel@email. com 
2 fname2 Confirm e ame2@email. com 


Are you sure you want to remove this | Bme36gzail. coz 


2) 
1  fnazeí Beet ame4¢@email. com 
: Ok Cancel mev@gzail.co 





除数 据 成 功 之 后 ， 调 用 'reload' 方法 来 刷新 datagrid 数据 。 
步骤 7 : 运行 代码 


开启 MySQL， 在 浏览 器 运行 代码 。 


下 载 jQuery EasyUl 实例 


W3School jQuery UI 教程 


jeasyui-app-crud1.zip 


jQuery EasyUl 应 用 - 创建 CRUD 应 用 541 


jQuery EasyUl 应 用 - 创建 CRUD 数据 网 格 
(DataGrid) 
在 上 一 章节 中 ， 我 们 使 用 对 话 框 (dialog) 组 件 创建 了 CRUD 应 用 来 创建 和 编辑 用 


户 信息 。 本 教程 我 们 将 告诉 您 如 何 创 建 一 个 CRUD 数据 网 格 (DataGrid) 。 我 们 
将 使 用 可 编辑 的 数据 网 格 (DataGrid) 插件 来 完成 这 些 CRUD 操作 动作 。 


My Users 
中 New (œ) Destroy = Save A Cancel 
First Name Last Name Phone Email 
3 tnames inaze3 UUUJ UUU-UUUU naze386gzail.cozm E 
4 fname¢ lnazeí (000) 000-0000 nazeí8gzail.coz 
S ]fname5 A< This field is required. |8gzail.coz 
6  fnaze6 lnaze6 (000) 000-0000 name6@gmail. com 
7  fname? lnaze? 000) 000-0000 name7@gmail. com 3 
8 fname8 lnaze8 (000) 000-0000 name8@gmail. com 
9 fnaze8 lnaze8 (000) 000-0000 naze88gzail. coz 
10 fnazei0 lnazei0 (000) 000-0000 nazei(08gzail.coz + 


步骤 1 :在 HTML 标签 中 定义 数据 网 格 (DataGrid) 


«table id="dg" title="My Users" style="width: 550px; height :250px" 
toolbar="#toolbar" idField="id" 
rownumbers="true" fitColumns="true" singleSelect="true"> 
<thead> 
<tr> 
«th field="firstname" width="50" editor="{type: 'validat 
«th field-"lastname" width="50" editor="{type: 'validate 
<th field="phone" width="50" editor="text">Phone</th> 
«th field="email" width="50" editor="{type: 'validatebo> 
</tr> 
</thead> 
</table> 
«div id="toolbar"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-add" plain: 
«a href="#" class="easyui-linkbutton" iconCls="icon-remove" pl: 
«a href="#" class="easyui-linkbutton" iconCls="icon-save" plair 
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plair 
</div> 
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步骤 2 : 使 用 可 编辑 的 数据 网 格 (DataGrid) 





$('#dg').edatagrid({ 
url: 'get_users.php', 
saveUrl: 'save_user.php', 
updateUrl: 'update user.php', 
destroyUrl: 'destroy user.php' 


3): 


我 们 应 该 提供 'ur', 'saveUrl', 'updateUrl' 和 'destroyUrl' 属性 来 编辑 数据 网 格 
(DataGrid) 


url : 从 服务 器 端 检索 用 户 数据 。 

saveUrl : 保存 一 个 新 的 用 户 数 据 。 
updateUrl : 更 新 一 个 已 存在 的 用 户 数 据 。 
destroyUrl : 删除 一 个 已 存在 的 用 户 数 据 。 


步骤 3 : 写 服 务 器 处 理 代 码 
保存 一 个 新 的 用 户 (save_user.php) 


$firstname = $ REQUEST['firstname']; 
$lastname = $ REQUEST['lastname']; 
$phone = $ REQUEST['phone']; 

$email = $ REQUEST['email']; 


include 'conn.php'; 


$sql - "insert into users(firstname,lastname,phone,email) values(': 
Qmysql query($sql); 
echo json encode(array( 

'id' -» mysql insert id(), 

'firstname' -» $firstname, 

'lastname' => $lastname, 

'phone' => $phone, 

'email' => $email 





更 新 一 个 已 存在 用 户 (update user.php) 


$id = intval($ REQUEST['id']); 
$firstname = $ REQUEST['firstname']; 
$lastname = $ REQUEST['lastname']; 
$phone = $ REQUEST['phone']; 

$email = $ REQUEST['email']; 


include 'conn.php'; 


$sql-"update users set firstname='$firstname', lastname='$lastname' , 
Qmysql query($sql); 
echo json encode(array( 

'id' => $id, 

'firstname' => $firstname, 

'lastname' => $lastname, 

'phone' => $phone, 

'email' => $email 





删除 一 个 已 存在 用 户 (destroy user.php) 
$id = intval($_REQUEST['id']); 
include 'conn.php'; 
$sql - "delete from users where id-$id"; 


@mysql_query($sql); 
echo json encode(array('success'-»true)); 


FA jQuery EasyUl 实例 


jeasyui-app-crud2.zip 


jQuery EasyUl 应 用 - 创建 展开 行 明 细 编 辑 表单 的 
CRUD 应 用 


当 切 换 数据 网 格 视图 (datagrid view) 到 'detailview'"， 用 户 可 以 展开 一 行 来 显示 一 
些 行 的 明细 在 行 下 面 。 这 个 功能 允许 您 为 防止 在 明细 行 面板 (panel) 中 的 编辑 表 
单 (form) 提供 一 些 合适 的 布局 (layout) 。 在 本 教程 中 ， 我 们 使 用 数据 网 格 
(datagrid) 组 件 来 减 小 编辑 表单 (form) 所 占据 空间 。 


My Users 
中 New (Œ) Destroy 
First Name Last Name Phone Ezail 


中 fnazel lnazei (000) 000-0000 nazei8gzail. com ^ 
0 





First Name fname2 Last Name A This field is required. 


Phone (000) 000-0000 Email name28gmail. com 
fal Save P Cancel 
中 fnaze3 lnaze3 (000) 000-0000 naze38gzail. coz 


oe 1: Æ HTML 标签 中 定义 数据 网 格 (DataGrid) 


<table id="dg" title="My Users" style="width:550px;height:250px" 
url="get_users.php" 
toolbar="#toolbar" 
fitColumns-"true" singleSelect="true"> 
<thead> 
<tr> 
<th field="firstname" width="50">First Name</th> 
<th field="lastname" width="50">Last Name</th> 
<th field="phone" width="50">Phone</th> 
<th field="email" width="50">Email</th> 
</tr> 
</thead> 
</table> 
«div id="toolbar"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-add" plain: 
«a href="#" class="easyui-linkbutton" iconCls="icon-remove" pl: 
</div> 


| |: 





步骤 2 : 为 数据 网 格 (DataGrid) 应 用 明细 视图 


$('#dg').datagrid({ 
view: detailview, 
detailFormatter: function( index, row) { 
return '<div class="ddv"></div>'; 
}, 
onExpandRow: function( index, row) { 
var ddv = $(this).datagrid('getRowDetail',index).find('div 
ddv.panel({ 
border:false, 
cache: true, 
href: 'show_form. php?index='+index, 
onLoad: function() { 
$('#dg').datagrid('fixDetailRowHeight', index); 
$('#dg').datagrid('selectRow', index); 
$('#dg').datagrid( 'getRowDetail', index).find('form 


3); 
$('4dg').datagrid('fixDetailRowHeight',index); 





为 了 为 数据 网 格 (DataGrid) 应 用 明细 视图 ， 在 html 页 面 头 部 引入 'datagrid- 
detailview.js' 文件 。 


我 们 使 用 'detailFormatter' 范 数 来 生成 行 明 细 内 容 。 在 这 种 情况 下 ， 我 们 返回 一 个 

用 于 放置 编辑 表单 (form) 的 空 的 <div>。 当 用 户 点 击 行 展 开 按 钮 (€) 

时 ，'onExpandRow' 事件 将 被 触发 ， 我 们 将 通过 ajax 加 载 编辑 表单 (form) 。 iA 

用 'getRowDetail' 方法 来 得 到 行 明 细 容 器 ， 所 以 我 们 能 查找 到 行 明细 面板 

2 A 在 行 明 细 中 创建 面板 (panel) ， 加 载 从 'show_form.php' 返回 的 编辑 
单 (form) 。 


步骤 3 : 创建 编辑 表单 (Form) 
编辑 表单 (form) 是 从 服务 器 加 载 的 。 


show form.php 


<form method="post"> 
«table class="dv-table" style="width:100%; background: #fafafa; p: 
<tr> 
<td>First Name</td> 
<td><input name="firstname" class="easyui-validatebox" 
<td>Last Name</td> 
<td><input name="lastname" class="easyui-validatebox" | 
</tr> 
<tr> 
<td>Phone</td> 
<td><input name="phone"></input></td> 
<td>Email</td> 
<td><input name="email" class="easyui-validatebox" val: 
</tr> 
</table> 
«div style="padding:5px 0; text-align: right; padding-right: 30px": 
«a href="#" class="easyui-linkbutton" iconCls="icon-save" [ 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel' 
</div> 
</form> 


El —— B 


步骤 4 : 保存 或 取消 编辑 
调用 'saveltem' 函数 来 保存 一 个 用 户 或 者 调用 'cancelltem' 函数 来 取消 编辑 。 





function saveItem( index) { 
var row = $('#dg').datagrid('getRows' )[index]; 
var url = row.isNewRecord ? 'save user.php' : 'update user.php: 


$('4dg').datagrid('getRowDetail',index).find('form').form('subr 
url: url, 


onSubmit: function(){ 
return $(this).form('validate'); 
3 
success: function(data)( 
data = eval('('*data-*')'); 
data.isNewRecord - false; 
$('4dg').datagrid('collapseRow',index); 
$('4dg').datagrid('updateRow',( 
index: index, 
row: data 


3): 
3): 


«| mcm 








决定 要 回 传 哪 一 个 URL， 然 后 查找 表单 (form) 对 象 ， 并 调用 'submit' 方法 来 提交 
表单 (form) 数据 。 当 保存 数据 成 功 时 ， 折 和 合 并 更 新 行 数据 。 


function cancelItem( index) { 
var row = $('#dg').datagrid('getRows' )[index]; 
if (row.isNewRecord) { 
$('#dg').datagrid( 'deleteRow', index); 


} else { 
$('#dg').datagrid('collapseRow', index); 
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下 载 jQuery EasyUl 实例 


jeasyui-app-crud3.zip 


jQuery EasyUl 应 用 - 创建 RSS Feed 阅读 器 


在 本 教程 中 ， 我 们 将 通过 jQuery EasyUl 框架 创建 一 个 RSS 阅读 器 。 
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我 们 将 使 用 以 下 插件 : 
e layout: 创建 应 用 的 用 户 界面 。 


e datagrid : 显示 RSS Feed 列表 。 
e tree : 显示 feed 频道 。 


步骤 1 : 创建 布局 (Layout) 


JQuery CasyU 用 - Bs Roo 


&lt;body class="easyui-layout"&gt; 
<div region="north" border="false" class="rtitle"> 
jQuery EasyUI RSS Reader Demo 
</div> 
«div region="west" title="Channels Tree" split="true" border="1 
<ul id="t-channels" url="data/channels.json"></ul> 
</div> 
«div region="center" border="false"> 
<div class="easyui-layout" fit="true"> 
<div region="north" split="true" border="false" style=' 
<table id="dg" 
url-"get feed.php" border="false" rownumbei 
fit-"true" fitColumns-"true" singleSelect=' 
<thead> 
<tr> 
«th field-"title" width="100">Title</tl 
«th field="description" width="200">De: 
<th field="pubdate" width="80">Publish 
</tr> 
</thead> 
</table> 
</div> 
«div region="center" border="false" style="over flow: hic 
«iframe id="cc" scrolling="auto" frameborder="0" si 
</div> 
</div> 
</div> 
&lt;/body&gt; 
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步骤 2 : mW (DataGrid) 义理 事件 
在 这 里 我 们 要 处 理 一 些 由 用 户 触 发 的 事件 。 





$('#dg').datagrid({ 

onSelect: function(index, row) { 
$('Zcc').attr('src', row.link); 

}, 

onLoadSuccess: function(){ 
var rows = $(this).datagrid('getRows'); 
if (rows.length){ 

$(this).datagrid('selectRow',0); 

} 


} 
3); 


本 实例 使 用 'onSelect' 事件 来 显示 feed 的 内 容 ， 使 用 'onLoadSuccess' 事件 来 选择 
第 一 有 4 


步骤 3: 树 形 菜单 (Tree) 义理 事件 
当 树 形 菜单 (Tree) 数据 已 经 加 载 ， 我 们 需要 选择 第 一 个 叶子 节点 ， 调 用 'select 


方法 来 选择 该 节点 。 使 用 'onSelect' 事件 来 得 到 已 选择 的 节点 ， 这 样 我 们 就 能 得 到 
对 应 的 'Url' 值 。 最 后 我 们 调用 数据 网 格 (DataGrid) 的 'load' 方法 来 刷新 feed 列 


表 数 据 。 


$('#t-channels').tree({ 
onSelect: function(node) { 
var url = node.attributes.url; 
$('#dg').datagrid('load', { 
url: url 


3): 
o 


onLoadSuccess:function(node, data) { 
if (data.length){ 
var id = data[0].children[0O].children[0].id; 
var n = $(this).tree('find', id); 
$(this).tree('select', n.target); 


} 
3); 


FA jQuery EasyUl 实例 


jeasyui-app-rssreader.zip 


jQuery EasyUl 拖 放 


jQuery EasyUl 拖 放 - 基本 的 拖 动 和 放置 


本 教程 向 您 展示 如 何 使 HTML 元 素 可 拖 动 ， 在 本 例 中 ， 我 们 将 创建 三 个 DIV 元 素 
然后 启用 他 们 的 拖 动 和 放置 。 





首先 ， 我 们 创建 三 个 «div» 元 素 : 


<div id="ddi" class="dd-demo"></div> 
<div id="dd2" class="dd-demo"></div> 
<div id="dd3" class="dd-demo"></div> 


对 于 第 一 个 «div» 元 素 ， 我 们 通过 默认 值 让 其 可 以 拖 动 。 


$('#dd1').draggable(); 


对 于 第 二 个 «div» 元 素 ， 我 们 通过 创建 一 个 克隆 (clone) 了 原来 元 素 的 代理 
(proxy) 让 其 可 以 拖 动 。 


$('#dd2').draggable({ 
proxy: 'clone' 


3); 


对 于 第 三 个 <div> 元 素 ， 我 们 通过 创建 自 定 义 代 理 (proxy) 让 其 可 以 拖 动 。 


$('4dd3').draggable(( 
proxy:function(source)( 
var p = $('«div class="proxy">proxy</div>'); 
p.appendTo('body'); 
return p; 
} 
}); 


FA jQuery EasyUl 实例 


jeasyui-dd-basic.zip 


jQuery EasyUI 拖 放 - 创建 拖 放 的 购物 车 
如 果 您 能 够 通过 您 的 Web 应 用 简单 地 实现 拖 动 和 放置 ， 您 就 会 知道 一 些 特 别 的 示 
西 。 通 过 jQuery EasyUl， 我 们 在 Web 应 用 中 可 以 简单 地 实现 拖 放 功能 。 


在 本 教程 中 ， 我 们 将 向 您 展示 如 何 创 建 一 个 启用 用 户 拖 动 和 放置 用 户 想 买 的 商品 的 
购物 车 页 面 。 购 物 篮 中 的 物品 和 价 咎 将 更 新 


oP 


显示 页 面 上 的 两 品 


Shopping Cart 





Total: $300 








Drop here to add to cart 


<ul class="products"> 
<li> 
<a href="#" class="item"> 
<img src-"images/shirti.gif"/» 


<div> 
<p>Balloon</p> 
<p>Price:$25</p> 
</div> 
</a> 
</li> 
<li> 


<a href="#" class="item"> 
<img src="images/shirt2.gif"/> 


<div> 
<p>Feeling</p> 
<p>Price:$25</p> 
</div> 
</a> 
</li> 
<!-- other products --> 


</ul> 


正如 您 所 看 到 的 上 面 的 代码 ， 我 们 添加 一 个 包含 一 些 <li> 元 素 的 <ul> 元 素来 显示 
商品 。 所 有 商品 都 有 名 字 和 价格 属性 ， 它 们 包含 在 <p> 元 素 中 。 


创建 购物 车 


<div class="cart"> 
<hi>Shopping Cart«/hi» 
«table id="cartcontent" style="width: 300px; height :auto;"> 
<thead> 
<tr> 
<th field="name" width=140>Name</th> 
«th field="quantity" width=60 align="right">Qué 
«th field="price" width=60 align="right">Price< 
</tr> 


</thead> 
</table> 
<p class="total">Total: $0</p> 
<h2>Drop here to add to cart</h2> 
</div> 





我 们 使 用 数据 网 格 (datagrid) 来 显示 购物 篮 中 的 物品 。 
拖 动 克隆 的 商品 


$('.item').draggable({ 

revert: true, 

proxy: 'clone', 

onStartDrag: function(){ 
$(this).draggable('options').cursor = 'not-allowed'; 
$(this).draggable('proxy').css('z-index',10); 

tr 

onStopDrag:function()( 
$(this).draggable('options').cursor='move'; 

} 


}); 


请 注意 ， 我 们 把 draggable 属性 的 值 从 'proxy' 设置 为 "clone'， 所 以 拖 动 元 素 将 由 
克隆 产生 。 


放置 选择 商品 到 购物 车 中 


$('.cart').droppable({ 
onDragEnter: function(e, source) { 
$(source) .draggable('options').cursor='auto'; 
tr 
onDragLeave: function(e, source) { 
$(source).draggable( 'options').cursor='not-allowed'; 
tr 
onDrop: function(e, source) { 
var name = $(source).find('p:eq(0)').html(); 
var price = $(source).find('p:eq(1)').htm1(); 
addProduct(name, parseFloat(price.split('$')[1])); 


} 
3); 
var data = {"total":0, "rows":[]}; 
var totalCost = 0; 
function addProduct(name, price) { 
function add(){ 
for(var i-0; i«data.total; i++){ 
var row - data.rows[i]; 


if (row.name == name)( 
row.quantity += 1; 
return; 

} 


data.total += 1; 
data.rows.push({ 
name : name, 
quantity:1, 
price:price 
}); 
} 
add(); 
totalCost += price; 


$('#cartcontent').datagrid('loadData', data); 
So div. cart. total). humb( Total: $'+totalcost); 


每 当 放 置 商品 的 时 候 ， 我 们 首先 得 到 商品 名 称 和 价格 ， 然 后 调用 'addProduct 函数 
来 更 新 购物 篮 。 


下 载 jQuery EasyUl 实例 


jeasyui-dd-shopping.zip 


jQuery EasyUI 拖 放 - 创建 学 校 课程 表 


本 教程 将 向 您 展示 如 何 使 用 jQuery EasyUl 创建 一 个 学 校 课 程 表 。 我 们 将 创建 两 个 
表格 : 在 左 侧 显示 学 校 科 目 ， 在 右 侧 显示 时 间 表 。 您 可 以 拖 动 学 校 科目 并 放置 到 时 
间 表 单元 格 上 。 学 校 科 目 是 一 个 <div class="item"> 元 素 ， 时 间 表 单元 格 是 一 个 
<td class="drop"> 元 素 。 








English Monday Tuesday Wednesday Thursday Friday 
Science 08:00 
Music 09:00 
History 10:00 
| Computer | 11:00 
Mathematics 12:00 
Arts | 13:00 Lunch 
Ethics 14:00 
15:00 Arts 
16:00 
显示 学 校 科 目 
<div class="left"> 
<table> 
<tr> 
<td><div class="item">English</div></td> 
</tr> 
<tr> 
<td><div class="item">Science</div></td> 
</tr> 
<!-- other subjects --> 
</table> 
</div> 


显示 时 间 表 


<div class="right"> 


<table> 

<tr> 
<td class="blank"></td> 
<td class="title">Monday</td> 
<td class="title">Tuesday</td> 
<td class="title">wednesday</td> 
<td class="title">Thursday</td> 
<td class="title">Friday</td> 

</tr> 

<tr> 
<td class="time">08:00</td> 
<td class="drop"></td> 
<td class="drop"></td> 
<td class="drop"></td> 
<td class="drop"></td> 
<td class="drop"></td> 

</tr> 

<!-- other cells --> 

</table> 
</div> 


拖 动 在 左 侧 的 学 校 科目 


$('.left .item').draggable({ 


revert: true, 


proxy: 'clone' 


3): 


放生 学 校 科目 在 时 间 表 单元 格 上 


$('.right td.drop').droppable( { 
onDragEnter : function(){ 
$(this).addClass('over'); 
ty 
onDragLeave: function(){ 
$(this).removeClass('over'); 
Pr 
onDrop: function(e, source) { 
$(this).removeClass('over'); 
if ($(source).hasClass('assigned' )){ 
$(this).append(source); 
} else { 
var c = $(source).clone().addClass('assigned'); 
$(this).empty().append(c); 
c.draggable({ 
revert: true 
31); 


} 
3): 


正如 您 所 看 到 的 上 面 的 代码 ， 当 用 户 拖 动 在 左 侧 的 学 校 科目 并 放置 到 时 间 表 单元 格 
中 时 ，onDrop 回调 函数 将 被 调用 。 我 们 克隆 从 左 侧 拖 动 的 源 元 素 并 把 它 附 加 到 时 
间 表 单元 格 上 。 当 把 学 校 科目 从 时 间 表 的 某 个 单元 格 拖 动 到 其 他 单元 格 ， 只 需 简单 
地 移动 它 即 可 。 


FA jQuery EasyUl 实例 


jeasyui-dd-timetable.zip 


jQuery EasyUl 菜单 与 按钮 


jQuery EasyUl 菜单 与 按钮 - 创建 简单 的 菜单 


Open > Word 
d Save Excel 
Exit FowerFoint 


菜单 (Menu) 定义 在 一 些 DIV 标记 中 ， 如 下 所 示 : 


«div id="mm" class="easyui-menu" style="width:120px;"> 
«div onclick="javascript:alert('new' )">New</div> 
<div> 

<span>Open</span> 
<div style="width:150px; "> 
<div><b>Word</b></div> 
<div>Excel</div> 
<div>PowerPoint</div> 
</div> 
</div> 
<div icon="icon-save">Save</div> 
<div class="menu-sep"></div> 
<div>Exit</div> 
</div> 


当 菜 单 创建 之 后 是 不 显示 的 ， 调 用 'show 方法 显示 它 或 者 调用 'hide' 方法 隐藏 它 : 


$('#mm').menu('show', { 


left: 200, 
top: 100 
3); 


FA jQuery EasyUl 实例 


jeasyui-mb-menu.zip 


jQuery EasyUl 菜单 与 按钮 - 创建 链接 按钮 (Link 
Button) 


通常 情况 下 ， 使 用 «button» 元 素来 创建 按钮 ， 而 链接 按钮 (Link Button) 则 是 使 
用 <a> 元 素来 创建 的 。 所 以 实际 上 一 个 链接 按钮 (Link Button) 就 是 一 个 显示 为 按 
钮 样式 的 <a> 元 素 。 


"E = n 
Cancel &5 Refresh Query text button Qal Print 
e NS =) 


X Cancel e Refresh |, Query text button 的 Print Ə 回 @ 


为 了 创建 链接 按钮 (Link Button) ， 所 有 您 需要 做 的 就 是 添加 一 个 名 为 'easyui- 
linkbutton' 的 class 属性 到 «a» 元 素 : 


<div style="padding:5px;background:#fafafa;width:500px;border:: 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel' 
<a href="#" class="easyui-linkbutton" iconCls="icon-reload' 
«a href="#" class="easyui-linkbutton" iconCls="icon-search' 
«a href="#" class="easyui-linkbutton">text button</a> 
<a href="#" class="easyui-linkbutton" iconCls="icon-print": 
</div> 


<div style="padding: 5px; background:#fafafa; width: 500px; border:: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true">text bul 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 

</div> 


EE) 





正如 您 所 看 到 的 ，iconCls 属性 是 一 个 icon 的 CSS class 样式 ， 它 在 按 纽 上 显示 一 
个 icon 图片。 


有 时 候 您 需要 禁用 链接 按钮 (Link Button) 或 者 启用 它 ， 下 面 的 代码 演示 了 如 何 禁 
用 一 个 链接 按钮 (Link Button) 


$(selector).linkbutton('disable'); // call the 'disable' met 


«| — EXE 











jQuery EasyUl 菜单 与 按钮 - 创建 菜单 按钮 (Menu 
Button) 


菜单 按钮 (Menu Button) 包含 一 个 按钮 (button) 和 一 个 菜单 (menu) 组 件 ， 当 
点 击 或 移动 鼠标 到 按钮 上 ， 将 显示 一 个 对 应 的 菜单 。 


£ Fditv| @ Hlp” 
A Undo 
(? Redo 

Cut 

Copy 


Faste 


(ms) Delete 


Select All 


为 了 定义 一 个 菜单 按钮 (Menu Button) ， 您 应 该 定义 一 个 链接 按钮 (Link 
Button) 和 一 个 菜单 (menu) ， 下 面 是 一 个 实例 : 


«div style-z"background:zZfafafa;padding:5px;width:200px;border:: 
«a href="#" class="easyui-menubutton" menu="#mm1" iconCls=' 
«a href="#" class="easyui-menubutton" menu="#mm2" iconCls=' 
</div> 
<div id="mmi" style="width:150px; "> 
<div iconCls="icon-undo">Undo</div> 
<div iconCls="icon-redo">Redo</div> 
<div class="menu-sep"></div> 
<div>Cut</div> 
<div>Copy</div> 
<div>Paste</div> 
<div class="menu-sep"></div> 
<div iconCls="icon-remove">Delete</div> 
<div>Select All</div> 
</div> 
«div id="mm2" style="width:100px; "> 
<div>Help</div> 
<div>Update</div> 
<div>About</div> 
</div> 





现在 已 经 定义 好 了 一 个 菜单 按钮 (Menu Button) ， 您 不 需要 写 任 何 的 javascript 
代码 。 


jQuery EasyUl 菜单 与 按钮 - 创建 分 割 按 钮 (Split 
Button ) 


分 割 按钮 (Split Button) 包含 一 个 链接 按钮 (Link Button) 和 一 个 菜单 
(Menu) 。 当 用 户 点 击 或 者 鼠标 县 停 在 向 下 箭头 区 域 ， 将 会 显示 一 个 对 应 的 菜 
单 。 本 实例 演示 了 如 何 创 建 和 使 用 分 割 按钮 (Split Button) 。 


2 Edit |™ x) 
A Undo 
(? Redo 

Cut 

Copy 


Faste 


Open > 
(ms) Delete 


Select All 
我 们 创建 一 个 分 割 按钮 (Split Button) 和 一 个 链接 按钮 (Link Button) 


«div style="border:ipx solid #ccc;background:#fafafa; padding: 5; 
«a href="#" class="easyui-splitbutton" menu="#mm" iconCls=' 
«a href="#" class="easyui-linkbutton" plain="true" iconCls: 
</div> 
<div id="mm" style="width: 150px; "> 
<div iconCls="icon-undo">Undo</div> 
<div iconCls="icon-redo">Redo</div> 
<div class="menu-sep"></div> 
<div>Cut</div> 
<div>Copy</div> 
<div>Paste</div> 
<div class="menu-sep"></div> 
<div> 
<span>Open</span> 
«div style="width:150px; "> 
<div>Firefox</div> 
<div>Internet Explorer</div> 
<div class="menu-sep"></div> 
<div>Select Program. ..</div> 
</div> 
</div> 
<div iconCls="icon-remove">Delete</div> 
<div>Select All</div> 
</div> 


: = — BE 








ipt 代 
pt 
javascri 
BY jav 
写 任 何 
与 
需要 
您 不 需 
) ，1 
tton 
lit Bu 
(Sp 
割 按钮 
一 个 分 害 
义 好 了 
定义 
T AE 
已 经 
现在 
码 。 


jQuery EasyUl 布局 


jQuery EasyUl 布局 - 为 网 页 创建 边框 布局 


边框 布局 (border layout) 提供 五 个 区 域 : east、west、north、south、center。 以 
下 是 一 些 通常 用 法 : 


north 区 域 可 以 用 来 显示 网 站 的 标语 。 

south 区 域 可 以 用 来 显示 版 权 以 及 一 些 说 明 。 
west 区 域 可 以 用 来 显示 导航 菜单 。 

east 区 域 可 以 用 来 显示 一 些 推广 的 项 目 。 
center 区 域 可 以 用 来 显示 主要 的 内 容 。 


Navigator « Language 


Select language: Introduction to Java language 


Java 
Cs 





lal 


tzi 


rlang 


为 了 应 用 布局 (layout) ， 您 应 该 确定 一 个 布局 (layout) 容器 ， 然 后 定义 一 ER 


域 。 布 局 (layout) 必 须 至 少 需要 一 个 center 区 域 ， 以 下 是 一 个 布局 (layout) 实 
例 : 


«div class="easyui-layout" style="width: 400px; height :200px; "> 
«div region="west" split-"true" title="Navigator" style="w: 
<p style="padding: 5px;margin:0;">Select language:</p> 
<ul> 
<li><a href="javascript:void(0)" onclick="showconte 
<li><a hrefz"javascript:void(0)" onclick="showconte 
<li><a hrefz"javascript:void(0)" onclick="showconte 


<li><a href="javascript:void(0)" onclick="showconte 
</ul> 


</div> 
<div id="content" region="center" title="Language" style="; 
</div> 

</div> 





我 们 在 一 个 «div» 容器 中 创建 了 一 个 边框 布局 (border layout) ， 布 局 (layout) 
把 容器 切割 为 两 个 部 分 ， 左 边 是 导航 菜单 ， 右 边 是 主要 内 容 。 


后 我 们 写 一 个 onclick 事件 处 理 画 数 来 检索 数据 ，'showcontent' 函数 非常 简单 : 


function showcontent (language) { 
$('#content').html('Introduction to ' + language + ' langué 
} 


«| = 








FA jQuery EasyUl 实例 


jeasyui-layout-layout.zip 


jQuery EasyUl 布局 - 在 面板 中 创建 复杂 布局 


面板 (Panel) 人 允许 您 创建 用 于 多 种 用 途 的 自 定义 布局 。 在 本 实例 中 ， 我 们 使 用 面 
板 (panel) 和 布局 (layout) 插件 来 创建 一 个 msn 消息 框 。 


4, Complex Panel Layout 


Search: 





Hi,I am easyui. 


4 mi» 


我 们 在 区 域 面板 中 使 用 多 个 布局 (layout) 。 在 消息 框 的 项 部 我 们 放置 一 个 查询 输 
入 框 ， 同 时 在 右边 放置 一 个 人 物 图 片 。 在 中 间 的 区 域 我 们 通过 设置 split 属性 为 
true， 把 这 部 分 切割 为 两 部 分 ， 人 允许 用 户 改变 区 域 面 板 的 尺寸 大 小 。 


以 下 就 是 所 有 代码 : 


«div class-"easyui-panel" title="Complex Panel Layout" iconCls: 
«div class="easyui-layout" fit="true"> 
<div region="north" border="false" class="p-search"> 
<label>Search:</label><input></input> 
</div> 
<div region="center" border="false"> 
<div class="easyui-layout" fit="true"> 
«div region="east" border="false" class="p-rigl 
<img src="images/msn.gif"/> 
</div> 
«div region="center" border="false" style="bor¢ 
<div class="easyui-layout" fit="true"> 
«div region-"south" split="true" borde! 
«textarea style="border :0;width:10( 


</div> 

<div region="center" border="false"> 
</div> 

</div> 
</div> 
</div> 
</div> 
</div> 


</div> 








我 们 不 需要 写 任何 的 javascript 代码 ， 它 自己 有 非常 强大 的 设计 用 户 界面 的 功能 。 


F jQuery EasyUl 实例 


jeasyui-layout-panel.zip 


jQuery EasyUl 布局 - 6) 27 4 Wik 


在 本 教程 中 ， 您 将 会 学 习 到 关于 easyui ft mirk (Accordion) 的 知识 。 折 受 面板 
(Accordion) 包含 一 系列 的 面板 (panel) 。 所 有 面板 (panel) 的 头 部 

(header) 都 是 可 见 的 ， 但 是 一 次 仅仅 显示 一 个 面板 (panel) 的 body 内 容 。 当 
用 户 点 击 面板 (panel) 的 头 部 (header) 时 ， 该 面板 (panel) 的 body 内 容 将 可 
见 ， 同 时 其 他 面板 (panel) 的 body 内 容 将 隐藏 不 可 见 。 


v Ab out Accordion 


A 


Accordion for jQuery 


Accordion is a part of easyul framework for 
jQuery. It lets you define your accordion 
component on web page more easily. 


EÈ About easyui Y 
Tree Menu 


Y 


我 们 将 创建 三 个 面板 (panel) ， 第 三 个 面板 (panel) 包含 一 个 树 形 菜 单 。 


«div class="easyui-accordion" style="width: 300px; height :200px;' 

«div title="About Accordion" iconCls="icon-ok" style="over1 
<h3 style="color:#0099FF;">Accordion for jQuery</h3> 
<p>Accordion is a part of easyui framework for jQuery. 

</div> 

«div title-"About easyui" iconCls="icon-reload" selected="1 
easyui help you build your web page easily 

«/div» 

«div title-"Tree Menu"> 
«ul id-"tti1" class="easyui-tree"> 


<li> 
<span>Folderi</span> 
<ul> 
<li> 
<span>Sub Folder 1</span> 
<ul> 
<li><span>File 11</span></1i> 
<li><span>File 12</span></1i> 
<li><span>File 13</span></1i> 
</ul> 
</li> 
<li><span>File 2</span></li> 
<li><span>File 3</span></li> 
</ul> 
</li> 
<li><span>File2</span></li> 
</ul> 
</div> 
</div> 
E 





FA jQuery EasyUl 实例 


jeasyui-layout-accordion.zip 


jQuery EasyUl 布局 - 创建 标签 页 (Tabs) 


本 教程 将 向 您 延 时 如 何 使 用 easyui 创建 一 个 Tabs 组 件 。 Tabs 有 多 个 可 以 动态 地 
添加 或 移 除 的 面板 (panel) 。 您 可 以 使 用 Tabs 来 在 相同 的 页 面 上 显示 不 同 的 实 
体 。 


Tabs 一 次 仅仅 显示 一 个 面板 (panel) ， 每 个 面板 (panel) 都 有 标题 、 图 标 和 关闭 
按钮 。 当 Tabs 被 选中 时 ， 将 显示 对 应 的 面板 (panel) HAA. 


First Tab Second Tab X & Third Tab X 


First Tab 


M HTML 标记 创建 Tabs， 包 含 一 个 DIV 容器 和 一 些 DIV 面板 (panel) 。 


«div class="easyui-tabs" style="width: 400px;height :100px; "> 
«div title="First Tab" style="padding: 10px; "> 


First Tab 

</div> 

«div title="Second Tab" closable="true" style="padding: 10p> 
Second Tab 

</div> 

<div title="Third Tab" iconCls="icon-reload" closable="true 
Third Tab 

</div> 


</div> 
== — B 


我 们 创建 一 个 带 有 三 个 面板 (panel) 的 Tabs 组 件 ， 第 二 个 和 第 三 个 面板 
(panel) 可 以 通过 点 击 关 闭 按钮 进行 关闭 。 





FA jQuery EasyUl 实例 


jeasyui-layout-tabs1.zip 


jQuery EasyUl 布局 - 动态 添加 标签 页 (Tabs) 


通过 使 用 jQuery EasyUl 可 以 很 容易 地 添加 Tabs。 您 只 需要 调用 'add' 方法 即 可 。 


在 本 教程 中 ， 我 们 将 使 用 iframe 动态 地 添加 显示 在 一 个 页 面 上 的 Tabs. 当 点 击 添 
add 一 个 新 的 tab 将 被 添加 。 如 果 tab 已 经 存在 ， 它 将 被 激活 。 








| Home | easyui X x || jquery X | google X | 


jQuery EasyUl 


easyui help you build your web page easily! 





Welcome to jQuery EasyUI 


Tart Wenn rei || Tot Pras 








4 "m + 





+e 1: 创建 Tabs 


<div style="margin-bottom:10px"> 
«a href="#" class="easyui-linkbutton" onclick="addTab('goo( 
«a href="#" class="easyui-linkbutton" onclick="addTab( 'jque 
«a href="#" class="easyui-linkbutton" onclick-"addTab('eas 

</div> 

<div id="tt" class="easyui-tabs" style="width: 400px;height : 250; 
<div title="Home"> 
</div> 

</div> 


El em ee 


这 个 html 代码 非常 简单 ,我 们 创建 了 带 有 一 个 名 为 Home' 的 tab 面板 的 Tabs. if 
注意 ， 我 们 不 需要 写 任 何 的 js 代码 。 





步骤 2 : 实现 'addTab' WAX 


function addTab(title, url){ 
af (S('Sstt').tabs(' exists ; title)){ 
$('#tt').tabs('select', title); 
) else { 
var content = '«iframe scrolling-"auto" frameborder="0' 
$('#tt').tabs('add', { 
title:title, 
content:content, 
closable: true 


3): 





我 们 使 用 'exists' 方法 来 判断 tab 是 否 已 经 存在 ， 如 果 已 存在 则 激活 tab。 如 果 不 存 
在 则 调用 'add' 方法 来 添加 一 个 新 的 tab 面板 。 


下 载 jQuery EasyUl 实例 


jeasyui-layout-tabs2.zip 


jQuery EasyUl 布局 - 添加 目 动 播放 标签 页 

(Tabs) 
本 教程 将 向 您 展示 如 何 创建 一 个 自动 播放 的 Tabs, Tabs 组 件 显示 第 一 个 tab m 
板 ， 然 后 显示 第 二 个 、 第 三 个 .我 们 将 写 一 些 代码 来 自动 地 切换 tab 面板 ， 然 后 让 


Shirti Shirt2 Shirt3 Shirt4 Shirt5 





步骤 1 : 创建 Tabs 


«div id="tt" class="easyui-tabs" style="width: 330px;height : 270; 
«div title="Shirti" style="padding: 20px;"> 
«img src="images/shirt1.gif"> 
</div> 
«div title="Shirt2" style="padding: 20px;"> 
«img src="images/shirt2.gif"> 
</div> 
«div title="Shirt3" style="padding: 20px;"> 
«img src="images/shirt3.gif"> 
</div> 
«div title="Shirt4" style="padding: 20px;"> 
«img src="images/shirt4.gif"> 
</div> 
«div title="Shirt5" style="padding: 20px;'"> 
«img src="images/shirt5.gif"> 
</div> 
</div> 





步骤 2: 写 目 动 播放 代 三 


var index = 0; 
var t = $('#tt'); 
var tabs = t.tabs('tabs'); 
setInterval(function(){ 
t.tabs('select', tabs[index].panel('options').title); 
index++; 
if (index >= tabs.length){ 
index = 0; 


j 
), 3000); 


正如 您 所 看 到 的 ， 我 们 调用 tabs' 方法 来 得 到 所 有 tab 面板 ， 并 使 用 'setinterval' K 
数 来 切换 他 们 。 


下 载 jQuery EasyUl 实例 


jeasyui-layout-tabs3.zip 


W3School jQuery Ul 教程 


jQuery EasyUl 布局 - 创建 XP 风格 左 侧面 板 


通常 情况 下 ， 在 Windows XP 的 资源 管理 器 文件 来 中， 左 侧 的 面板 (panel) 包含 
me 本 教程 向 您 展示 如 何 通 过 easyui 的 面板 (panel) 插件 来 创建 XP 
左 侧面 板 。 


Picture Tasks 


View as a slide show 
Order prints online 
Print pictures 


File and Folder Tasks 


Make a new folder 

Publish this folder to the 
Web 

Share this folder 


Other Places 


Details 


My documents 
File folder 


Date modified: Oct. 3rd 2010 





定义 一 些 面板 (panel) 


我 们 定义 一 些 面板 (panel) ， 这 些 面板 (panel) 用 来 显示 一 些 任务 。 每 个 面板 
(panel) BABY Bit ARAIRE. 


代码 如 下 所 示 : 


jQuery EasyUl 布局 - 创建 XP 风格 左 侧面 板 578 


<div style="width: 200px; height :auto; background: #7190E0; padding 

<div class="easyui-panel" title="Picture Tasks" collapsible 
View as a slide show<br/> 
Order prints online<br/> 
Print pictures 

</div> 

<br/> 

<div class="easyui-panel" title="File and Folder Tasks" co- 
Make a new folder<br/> 
Publish this folder to the Web<br/> 
Share this folder 

</div> 

<br/> 

<div class="easyui-panel" title="Other Places" collapsible: 
New York<br/> 
My Pictures<br/> 
My Computer<br/> 
My Network Places 

</div> 

<br/> 

<div class="easyui-panel" title="Details" collapsible="true 
My documents<br/> 
File folder<br/><br/> 
Date modified: Oct.3rd 2010 

</div> 

</div> 


4 mu 


自 定 义 面 板 (panel) 的 外 观 效果 


请 注意 ， 这 个 视图 外 观 效 果 不 是 我 们 想 要 的 ， 我 们 必须 改变 面板 (panel) 的 头 部 
背景 图 片 和 折 县 /展开 按钮 的 图 标 。 


做 到 这 一 点 并 不 难 ， 我 们 需要 做 的 只 是 重新 定义 一 些 CSS, 





. panel-body{ 
background: #f0fOf0; 
} 


.panel-header{ 
background:#fff url('images/panel header bg.gif') no-repeat 
} 
.panel-tool-collapse{ 
background:url('images/arrow up.gif') no-repeat Opx -3px; 
} 
.panel-tool-expand{ 
background:url('images/arrow down.gif') no-repeat Opx -3px, 


} 








由 此 可 见 ， 使 用 easyui 定义 用 户 界 面 非 常 简单 。 


FA jQuery EasyUl 实例 


jeasyui-layout-xp.zip 


jQuery EasyUl 数据 网 格 


jQuery EasyUl 数据 网 格 - 转换 HTML 表格 为 数据 
网 格 


本 实例 演示 如 何 转换 表格 (table) 为 数据 网 格 (datagrid) 。 


Col 1 col 2 i Gol Aa cola Es Gold 
Data 1 Data 2 Data 3 Data 4 Data 5 Data 5 
Data 1 Data 2 Data 3 Data4 Data 5 Data 5 
Data 1 Data 2 Data 3 Data4 Tata 5 Data 5 
Data 1 Data 2 Data 3 Data4 Data S5 Data 


数据 网 格 (datagrid) 的 列 信息 是 定义 在 <thead> 标记 中 ， 数 据 是 定义 在 <tbody> 
标记 中 。 确 保 为 所 有 的 数据 列 设置 field 名 称 ， 请 看 下 面 的 实例 : 


«table id="tt" class="easyui-datagrid" style="width: 400px; heigl 


<the 


ad> 

<tr> 
<th 
<th 
<th 
<th 
<th 
<th 


field-"name1i" 
field-"name2" 
field="name3" 
field-"name4" 
field="name5" 
Field="name6" 


width="50">Col 
width="50">Col 
width="50">Col 
width="50">Col 
width="50">Col 
width="50">Col 


1</th> 
2</th> 
3</th> 
4</th> 
5</th> 
6</th> 


</tr> 
</thead> 
<tbody> 
<tr> 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
</tr> 
<tr> 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
</tr> 
<tr> 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
</tr> 
<tr> 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
<td>Data 
</tr> 
</tbody> 
</table> 


1«/td» 
2«/td» 
3«/td» 
4«/td» 
5«/td» 
6</td> 


1«/td» 
2«/td» 
3«/td» 
4«/td» 
5«/td» 
6</td> 


1«/td» 
2«/td» 
3«/td» 
4«/td» 
5«/td» 
6</td> 


1«/td» 
2«/td» 
3«/td» 
4«/td» 
5«/td» 
6</td> 





非常 棒 ， 您 可 以 定义 一 个 复 条 的 表 头 ， 例 如 : 


<thead> 
<tr> 
<th 
<th 
<th 
<th 
</tr> 
<tr> 
<th 
<th 
<th 
</tr> 
</thead> 


field-"namei1" width="50" rowspan="2">Col 1</th> 
field="name2" width="50" rowspan="2">Col 2</th> 
field="name3" width="50" rowspan="2">Col 3</th> 
colspan="3">Details</th> 


Ffield="name4" width="50">Col 4</th> 
field-"name5" width="50">Col 5</th> 
field-"name6" width="50">Col 6</th> 


现在 您 可 以 看 见 ， 复 条 表 头 已 经 创建 。 


Col 1 Col 2 ‘Col 3 


Details 


Col 4 ‘Col5 ‘Col 6 


Data 1 Data2 Data3 Data4 DataS Data 5 
Data 1 Data2 Data 3 Data 4 Data5 Data 
Data 1 Data2 Data3 Data 4 :Data5 Data 6 


Data 1 Data2 Data3 Data 4 :Data5 Data 6 
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下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid1.zip 


jQuery EasyUl 数据 网 格 - 取得 选中 行 数据 


本 实例 演示 如 何 取得 选中 行 数 据 。 














[a] Load Data 

Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-SW-01 16.5 10 Large F ^ 
EST-10 K3-DL-01 18.5 12 Spotted Adult Female P 

EST-11 RP-SN-01 18.5 12 Venomless E 

EST-13 RP-LI-02 18.5 12 Green Adult E p 
EST-14 FL-DSH-01 58:5 12 Tailless P 

EST-16 FL-DLH-02 93.5 12 Adult Female P 

EST-17 FL-DLH-02 93.5 12 Adult Male P Ex 
RST-12 AY-CR-ü1 103 5 Q9 Adali Mala P x 


数据 网 格 (datagrid) 组 件 包含 两 种 方法 来 检索 选中 行 数据 : 


e getSelected : 取得 第 一 个 选中 行 数据 ， 如 果 没 有 选中 行 ， 则 返回 null， 否 则 返 
回 记 录 。 
e getSelections : 取得 所 有 选中 行 数据 ， 返 回 元 素 记 录 的 数组 数据 。 


创建 数据 网 格 (DataGrid) 


«table id="tt" class="easyui-datagrid" style="width:600px;heigl 
url="data/datagrid_data.json" 
title="Load Data" iconCls="icon-save"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
«th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="150">Attribute</th> 
«th field="status" width="60" align="center">Staut: 
</tr> 
</thead> 
</table> 


E —_ B 
使 用 演示 
取得 选中 行 数据 : 





var row = $('#tt').datagrid('getSelected'); 
if (row){ 

alert('Item ID: '+row.itemid+"\nPrice:"+row.listprice); 
J 


取得 所 有 选中 行 的 itemid : 
var ids = []; 
var rows = $('#tt').datagrid('getSelections'); 
for(var i-0; i«rows.length; i++){ 


ids.push(rows[i].itemid); 


alert(ids.join('\n')); 


下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid3.zip 


jQuery EasyUl 数据 网 格 - 添加 查询 功能 


本 实例 演示 如 何 从 数据 库 得 到 数据 ， 并 将 它们 显示 在 数据 网 格 (datagrid) 中 。 然 
后 演示 如 何 根据 用 户 输入 的 搜索 关键 词 搜 寻 显 示 结 果 。 








i Searching 
Item ID: Product ID: K Search 
Item ID Product ID List Price Unit Cost Attribute Stauts 

3 EST-23 K9-RT-02 145.49 100.00 Adult Female P € 
4 EST24 K9-RT-02 255.50 92.00 Adult Male P 

5 EST25 <9-RT-02 325.29 : Ll 
6 EST-26 K9-CW-01 125.50 92.00 Adult Male P 1 
7 EST27 K9-CW-01 155.29 90.00 Adult Female P 

8 EST28 K9-RT-01 155.29 90.00 Adult Female P = 
10 = |l Pagei of2 b bl 4 Displaying 1 to 10 of 12 items 


创建 数据 网 格 (DataGrid) 
创建 带 有 分 页 功能 的 数据 网 格 (datagrid) ， 然 后 添加 工具 栏 到 其 中 。 


«table id="tt" class="easyui-datagrid" style-"width:600px;heigt 
url-"datagrid24 getdata.php" toolbar="#tb" 
title-"Load Data" iconCls="icon-save" 
rownumbers="true" pagination="true"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="150">Attribute</th> 
«th field="status" width="60" align="center">Staut:s 
</tr> 
</thead> 
</table> 


| = E 


工具 栏 定义 如 下 : 





«div id="tb" style="padding: 3px"> 
<span>Item ID:</span> 
<input id="itemid" style-"line-height:26px;border:1px solic 
<span>Product ID:</span> 
<input id="productid" style="line-height:26px;border:1px s 
<a href="#" class="easyui-linkbutton" plain="true" onclick: 
</div> 


‘ ses 








当 用 户 输入 查询 值 并 按 下 查询 按钮 时 ，'doSearch' KAUSIA : 


function doSearch(){ 
$('#tt').datagrid('load', { 
itemid: $('#itemid').val(), 
productid: $('#productid').val() 
3); 


上 面 的 代码 调用 了 "load' 方法 来 加 载 新 的 数据 网 格 (datagrid) 数据 。 我 们 需要 传 
i& 'itemid' 和 "productid' 参数 到 服务 器 。 


服务 器 端 代 码 


include 'conn.php'; 
$page = isset($ POST['page']) ? intval($ POST['page']) : 1; 
$rows = isset($ POST['rows']) ? intval($ POST['rows']) : 10; 
$itemid = isset($ POST['itemid']) ? mysql real escape string($. 
$productid = isset($ POST['productid']) ? mysql real escape st! 
$offset = ($page-1)*$rows; 
$result = array(); 
$where = "itemid like '$itemid%' and productid like '$productic 
$rs = mysql query("select count(*) from item where " . $where), 
$row - mysql fetch row($rs); 
$result["total"] = $row[0]; 
$rs = mysql query("select * from item where " . $where . " lim: 
$items - array(); 
while($row = mysql fetch object($rs))( 

array push($items, $row); 
$result["rows"] = $items; 


echo json encode($result); 


4 — Ķ 





FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid24.zip 


jQuery EasyUl 数据 网 格 - 添加 工具 栏 


本 实例 演示 如 何 添加 工具 栏 (toolbar) 到 数据 网 格 (datagrid) 。 


DataGrid with Toolbar 


GE Add of Cut [i] Save 





Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-S¥-01 16.5 10 Large P ^ 
EST-10 K3-DL-01 18.5 12 Spotted Adult Fe P 

 RP-SN-01 12 Venomless 

EST-12 RP-SH-01 18.5 12 Rattleless P = 
EST-13 RP-LI-02 18.5 12 Green Adult P 

EST-14 FL-DSH-01 58.5 12 Tailless P 

EST-15 FL-DSH-01 23.5 12 With tail P 

EST-16 FL-DLH-02 93.5 12 Adult Female E - 


创建 数据 网 格 (DataGrid) 


«table id="tt" class="easyui-datagrid" style="width:600px;heigl 
url="data/datagrid_data. json" 
title="DataGrid with Toolbar" iconCls="icon-save" 
toolbar="#tb"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field="listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="150">Attribute</th> 
«th field="status" width="60" align="center">Staut: 
</tr> 
</thead> 
</table> 
<div id="tb"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-add" p. 
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" p- 
«a href="#" class="easyui-linkbutton" iconCls="icon-save" [ 
</div> 


| — B 


我 们 不 需要 写 任 何 的 javascript 代码 ， 只 需 通 过 ‘toolbar’ 属性 附加 工具 栏 
(toolbar) 到 数据 网 格 (datagrid) 。 





FA jQuery EasyUl 实例 


W3School jQuery UI 教程 


jeasyui-datagrid-datagrid4.zip 


jQuery EasyUl 数据 网 格 - 添加 工具 栏 591 


jQuery EasyUl 数据 网 格 - 创建 复杂 工具 栏 


数据 网 格 (datagrid) 的 工具 栏 (toolbar) 可 以 包含 按钮 及 其 他 组 件 。 您 可 以 通 个 
一 个 已 存在 的 DIV 标签 来 简单 地 定义 工具 栏 布 局 ， 该 DIV 标签 将 成 为 数据 网 格 
(datagrid) 工具 栏 的 内 容 。 本 教程 将 向 您 展示 如 何 创建 数据 网 格 (datagrid) 组 


件 的 复杂 工具 栏 。 


创建 工具 栏 (Toolbar) 


«div id="tb" style="padding:5px;height:auto"> 
<div style="margin-bottom: 5px"> 


<a href="#" 
<a href= "+" 
<a href="#" 
<a href="#" 
<a href="#" 
</div> 
<div> 


class="easyui-linkbutton" 
class-z"easyui-linkbutton" 
class="easyui-linkbutton" 
class="easyui-linkbutton" 
class="easyui-linkbutton" 


iconCls="icon-ad¢ 
iconCls="icon-ed: 
iconCls="icon-sa\ 
iconCls="icon-cut 
iconCls="icon-rer 


Date From: «input class="easyui-datebox" style="width: é 
To: <input class="easyui-datebox" style="width: 80px"> 


Language: 


<input class="easyui-combobox" style="width:100px" 
url="data/combobox_data.json" 
valueField-"id" textField="text"> 

«a href="#" class="easyui-linkbutton" iconCls="icon-seé 


</div> 
</div> 


SSS 


创建 数据 网 格 (DataGrid) 





«table class="easyui-datagrid" style="width: 600px;height:250px' 
url="data/datagrid_data.json" 
title="DataGrid - Complex Toolbar" toolbar="#tb" 
singleSelect="true" fitColumns="true"> 


<thead> 
<tr> 
<th 
<th 
<th 
<th 
<th 
<th 
</tr> 
</thead> 
</table> 


Aoo ë ëR 


field="itemid" width="60">Item ID</th> 
field="productid" width="80">Product ID</th> 
field="listprice" align="right" width="70">Lis1 
field-"unitcost" align="right" width="70">Unit 
field="attri" width="200">Address</th> 
field="status" width="50">Status</th> 





正如 您 所 看 到 的 ， 数 据 网 格 (datagrid) 的 工具 栏 域 对 话 框 (dialog) 相似 。 我 们 不 
需要 写 任 何 的 javascript 代码 ， 就 能 创建 带 有 复杂 工具 栏 的 数据 网 格 (datagrid) 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid19.zip 


jQuery EasyUl 数据 网 格 - 设置 冻结 列 


本 实例 演示 如 何 冻 结 一 些 列 ， 当 用 户 在 网 格 上 移动 水 平 滚动 条 时 ， 冻 结 列 不 能 滚动 
到 视图 的 外 部 。 


fal Frozen Columns 














Item ID Product ID List Prica Unit Cost Attribute Status 

EST-1 FI-SW-01 16.5 10 Large P ^ 

EST-10 K3-DL-01 18.5 12 Spotted Adult Fe P | 

EST-11 RP-SN-01 18.5 12 Venomless P 

EST-12 RP-SN-01 18.5 12 Rattleless P E 
RP-LI-02 18.5. 12 Gr f 3 

EST-14 FL-DSH-01 - 56.5 — 12 Tailless P 

EST-15 FL-DSH-01 23.5 12 With tail P 

EST-18 FL-DLH-02 93.5 12 Adult Female P 

EST-17 FL-DLH-02 93.5 12 Adult Male P id 

ROT-12 AW-CR-n1 «| ut | ? 


为 了 冻结 列 ， 您 需要 定义 frozenColumns 属性 。frozenColumn 属性 和 columns Æ 
性 一 样 。 


$('#tt').datagrid({ 

title: 'Frozen Columns', 

iconCls:'icon-save', 

width:500, 

height:250, 

url: 'data/datagrid_data.json', 

frozenColumns:[[ 
(field:'itemid',title:'Item ID',width:80}, 
(field:'productid',title:'Product ID',width:80}, 


1l; 

columns:[[ 
(field:'listprice',title:'List Price',width:80,align:') 
(field:'unitcost',title:'Unit Cost',width:80,align:'rit 
{field:'attri',title: 'Attribute',width:100}, 
{field:'status', title: 'Status',width:60} 

11 





` 需 要 写 任 何 的 javascript 代码 ， 这 样 您 就 能 创建 一 个 数据 网 格 (datagrid) 组 
件 ， 如 下 所 示 : 


«table id="tt" title="Frozen Columns" class="easyui-datagrid" : 
url="data/datagrid_data.json" 
singleSelect="true" iconCls="icon-save"> 
<thead frozen="true"> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
</tr> 
</thead> 
<thead> 
<tr> 
«th field="listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
«th field="attri" width="150">Attribute</th> 
«th field-"status" width="60" align="center">Stauts 
</tr> 
</thead> 
</table> 


OO O 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid5.zip 


jQuery EasyUl 数据 网 格 - 动态 改变 列 


数据 网 格 (DataGrid) 列 可 以 使 用 'columns' 属性 简单 地 定义 。 如 果 您 想 动 态 地 改 
变 列 ， 那 根本 没有 问题 。 为 了 改变 列 ， 您 可 以 重新 调用 datagrid 方法 ， 并 传递 一 个 
新 的 columns 属性 。 


创建 数据 网 格 (DataGrid) 


«table id="tt" title="Frozen Columns" class="easyui-datagrid" : 
url="data/datagrid_data.json" 
singleSelect="true" iconCls="icon-save"> 

</table> 


EE 





$('#tt').datagrid({ 
columns: [[ 
(field:'itemid',title:'Item ID',width:80}, 
{field: 'productid',title:'Product ID',width:80}, 
{field:'attri',title: 'Attribute',width: 200}, 
{field:'status', title: 'Status',width:80} 
]] 
3); 


运行 网 页 ， 您 将 看 见 : 


回 Change Columns 


Item ID Product ID Attribute Status 

EST-1 FI-SW-01 Large P ^ 
EST-10 K3-DL-01 Spotted Adult Female F 

EST-11 RP-SN-01 Venomless P 

EST-12 RP-SN-01 Rattleless P 

EST-13 RP-LI-02 Green Adult P E 
EST-14 FL-DSH-01 Tailless P 

EST-15 FL-DSH-01 With tail P 

EST-18 FL-DLH-02 Adult Female P 

EST-17 FL-DLH-02 Adult Male P 

DoT CDN DT 1 3.. n 


可 是 有 时 候 您 想 改 变 列 ， 所 以 您 需要 写 一 些 代 码 : 


$('#tt').datagrid({ 
columns: [[ 

(field:'itemid',title:'Item ID',width:80}, 
{field: 'productid',title:'Product ID',width:80), 
(field:'listprice',title:'List Price',width:80,align:') 
{field: 'unitcost',title:'Unit Cost',width:80, align: 'ric 
{field:'attri',title: 'Attribute',width:100}, 
{field:'status', title: 'Status',width:60} 


3): 








请 记 住 ， 我 们 已 经 定义 了 其 他 属性 ， 比 如 : url, width, height 等 等 。 我 们 不 需 
再 一 次 定义 它们 ， 我 们 定义 那些 我 们 需要 改变 的 。 


fal Change Columns 


Item ID Product ID List Price Unit Cost Attribute Status 
EST-1 FI-S#-01 16.5 10 Large F c 
EST-10 K3-DL-01 18.5 12 Spotted Adult Fe P 
EST-11 RP-SH-O1 18.5 12 Venomless P 
EST-12 RP-SH-01 18.5 12 Rattleless F 
EST-13 RP-LI-02 18.5 12 Green Adult F E 
EST-14 FL-DSH-01 58.5 12 Tailless P 
EST-15 FL-DSH-01 23.5 12 With tail F 
EST-16 FL-DLH-02 93.5 12 Adult Female P 
EST-1T FL-DLH-02 93.5 12 Adult Male P 
c nO 12324 TTE E 


EST-19 AM-CPIO: in? 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid6.zip 


jQuery EasyUl 数据 网 格 - 格式 化 列 


以 下 实例 格式 化 在 easyui DataGrid 里 的 列 数据 ， 并 使 用 自 定义 列 的 formatter， 如 
果 价 格 小 于 20 就 将 文本 变 为 红色 。 


Formatting Columns 


Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-SW-01 (16.5) 10 Large P 全 
EST-10 K3-DL-01 (18. 5) 12 Spotted Adult Fe P 

ESI-11 RP-SN-01 (18. 5) 12 Venomless P 

EST-12 RP-SH-01 (18. 5) 12 Rattleless P 

EST-13 RP-LI-02 (18.5) 12 Green Adult F E 
EST-14 FL-DSH-O1 58.5 12 Tailless P 

EST-15 FL-DSH-O1 23.5 12 With tail P 

EST-16 FL-DLH-02 93.5 12 Adult Female P 

EST-1T FL-DLH-02 93.5 12 Adult Male P 

TOT to A PBN 102 c DO 21234 H.3. E 


为 了 格式 化 一 个 数据 网 格 (DataGrid) 列 ， 我 们 需要 设置 formatter 属性 ， 它 是 一 
个 男 数 。 这 个 格式 化 函数 包含 三 个 参数 : 


e value : 当前 列 对 应 字段 值 。 
e row : 当前 的 行 记 录 数 据 。 
e index : 当前 的 行 下 标 。 


创建 数据 网 格 (DataGrid) 


<table id="tt" title="Formatting Columns" class="easyui-datagr: 
url="data/datagrid_data.json" 
singleSelect="true" iconCls="icon-save"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right" forr 
«th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="100">Attribute</th> 
«th field="status" width="60" align="center">Stauts 
</tr> 
</thead> 
</table> 





写 格 式 化 函数 


function formatPrice(val, row){ 
if (val < 20){ 
return '«span style="color:red;">('+val+')</span>'; 
} else { 
return val; 
j 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid7 .zip 


jQuery EasyUl 数据 网 格 - 设置 排序 


本 实例 演示 如 何 通过 点 击 列 表 头 来 排序 数据 网 格 (DataGrid) 。 








fal Load Data 
Item ID Product ID List Price 4 Unit Cost Attribute Stauts 
21 |EST-26 K9-CW-01 125. 50 82.00 Adult Male P = 
22 | EST-22 K9-RT-02 135. 50 100.00 Adult Male F 
23 EST-23 K9-RT-02 145.48 100.00 Adult Fezale F 
24 EST-28 K9-RT-01 155. 29 90.00 Adult Fezale P | =I 
25 | EST-27 K9-CW-01 155. 29 90.00 Adult Fezale F 
26 EST-16 AV-CB-0 93.50 | 92.00 
27 EST-24 K9-RT-02 255. 50 92.00 Adult Male F 
28 ST-25 K8-RT-02 325 29 8n fn Adult Female F as 
10 +» | |4 4  Page3 of 3 2 Displaying 21 to 28 of 28 items 


数据 网 格 (DataGrid) 的 所 有 列 可 以 通过 点 击 列表 头 来 排序 。 您 可 以 定义 哪 列 可 以 
排序 。 默 认 的 ， 列 是 不 能 排序 的 ， 除 非 您 设置 sortable 属性 为 true。 


创建 数据 网 格 (DataGrid) 


«table id="tt" class="easyui-datagrid" style="width:600px;heigl 
url="datagrid8_getdata.php" 
title="Load Data" iconCls="icon-save" 
rownumbers="true" pagination="true"> 


<thead> 
<tr> 
<th 
<th 
<th 
<th 
<th 
<th 
</tr> 
</thead> 
</table> 


E — B 
我 们 定义 一 些 可 排序 的 列 ， 


field="itemid" width="80" sortable="true">Item 
field-"productid" width="80" sortable="true">P) 
field="listprice" width="80" align="right" sort 
field="unitcost" width="80" align="right" sort: 
field="attri" width="150">Attribute</th> 

field="status" width="60" align="center">Staut: 





aå itemid, productid, listprice, unitcost 等 


=, ‘attr1' 列 和 'status' 列 不 能 排序 。 
当 排 序 时 ， 数 据 网 格 (DataGrid) 将 发 送 两 个 参数 到 远程 服务 器 : 


e sort : 排序 列 字段 名 。 


e order: 排序 方式 ， 可 以 是 'asc' 或 者 '"desc'， 默 认 值 是 'asc'。 


AR A arime 


$page = isset($ POST['page']) ? intval($ POST['page']) : 1; 
$rows = isset($ POST['rows']) ? intval($ POST['rows']) : 10; 
$sort - isset($ POST['sort']) ? strval($ POST['sort']) : 'item: 


$order = isset($ POST['order']) ? strval($ POST['order']) : ‘as 
$offset = ($page-1)*$rows; 


$result = array(); 
include 'conn.php'; 
$rs - mysql query("select count(*) from item"); 
$row - mysql fetch row($rs); 
$result["total"] = $row[0]; 
$rs = mysql query("select * from item order by $sort $order lir 
$items - array(); 
while($row = mysql fetch object($rs))( 
array push(S$items, $row); 


$result["rows"] = $items; 


echo json_encode($result); 





FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid8.zip 


jQuery EasyUl 数据 网 格 - 自 定义 排序 


如 果 默 认 的 排序 行为 不 满足 您 的 需求 ， 您 可 以 自 定义 数据 网 格 (datagrid) 的 排序 


行为 。 


y Custom Sort 


Item ID List Price Unit Cost 
EST-15 23.5 12 
EST-11 18.5 12 
EST-18 193.5 92 
EST-1T 93.5 12 
EST-10 18.5 12 


EST-1 





EST-16 
EST-14 





16.5 10 
18.5 1 
93:5 12 
58.5 12 


2 Rattleless 


Attribute 


With tail 

Venomless 

Adult Male 

Adult Male 

Spotted Adult Female 
Large 





Adult Female 
Tailless 





Date + 


UJ) UU) COO 


11/04/2005 
12/31/2005 
03/04/2006 
03/04/2008 
05/04/2009 
03/04/2010 
03/21/2010 
03/23/2010 
07/04/2010 





m 








4 


meekly, FAP ALES Ee SHE, KAE sorter。 这 个 函数 将 接受 
两 个 值 ， 返 回 值 料 如 下 : 


valueA > valueB => ix 


valueA < valueB => 返 


目 定 义 排序 代码 


回 1 
回 - 


1 


<table id="tt"></table> 


$('#tt').datagrid({ 
title:'Custom Sort', 
iconCls:'icon-ok', 
width:520, 
height:250, 
singleSelect: true, 
remoteSort: false, 
columns: [[ 
(field:'itemid',title:'Item ID',width:60, sortable: true. 
(field:'listprice',title:'List Price',width:70,align:') 
(field:'unitcost',title:'Unit Cost',width: 70, align: 'ric 
{field:'attri',title: 'Attribute',width:120, sortable: trt 
{field:'date', title: 'Date',width:80,sortable: true, aligr 
sorter: function(a, b) { 
a=a.split('/'); 
b b.split('/'); 
if (a[2] == b[2]){ 
if (a[0] == Blot 
return (a[1]>b[1]?1:-1); 
} else { 
return (a[0]>b[0]?1:-1); 


} 
} else { 

return (a[2]>b[2]?1:-1); 
} 


} 
ty 
{field:'status', title: 'Status',width:40,align: center 
11 
}).datagrid('loadData', data); 





您 可 以 从 这 段 代 码 中 看 到 ， 我 们 为 date 列 创建 了 自 定义 的 sorter。 日 期 的 格式 是 
dd/mm/yyyy'， 可 以 轻松 的 按 年 月 日 排序 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid14.zip 


jQuery EasyUl 数据 网 格 - 创建 列 组 合 


easyui 的 数据 网 格 (DataGrid) 可 以 创建 列 组 合 ， 如 下 所 示 : 


Column Group 


Item ID 


EST-1 

EST-10 
EST-11 
EST-12 


p: OO : =a: Ga: Ch: 4» : CO : IN: 
tzi 
v 
-3 
1 
m 
co 


Product ID 


FI-SW-01 
K3-DL-01 
RP-SN-01 
RP-SN-01 
RP-LI-02 
FL-DSH-01 
FL-DSH-01 
FL-DLH-02 


List Price 


16.5 
18.5 
18.5 
18.5 
18.5 
58.5 
23.5 
93.5 


Item Details 


Unit Cost 


Attribute Status 


Large P 
Spotted Adult Femalc P 
Venomless P 
Rattleless 
Green Adult 
Tailless 
With tail 
Adult Female 


p; "do: "d; "d : "d WES 


在 本 实例 中 ， 我 们 使 用 平面 数据 来 填充 数据 网 格 (DataGrid) 
listprice、unitcost、addr1、status 列 组 合 在 一 个 单一 的 列 下 。 


为 了 创建 列 组 合 ， 您 应该 定义 数据 网 格 (datagrid) 插件 的 columns 数据 。 列 的 每 


"n 


Tc 


的 数据 ， 并 把 


个 元 素 是 定义 一 组 可 使 用 rowspan 或 colspan 属性 来 进行 组 合 的 单元 格 。 
下 面 的 代码 实现 了 上 面 的 实例 : 


«table id="tt" title="Column Group" class="easyui-datagrid" st 


url="data/datagrid_data.json" 


singleSelect-"true" iconCls-"icon-save" rownumbers="trt 
<thead> 
<tr> 


</tr> 
<tr> 


</tr> 
</thead> 


</table> 
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rowspan="2" field="itemid" width="80">Item ID<, 
rowspan="2" field-"productid" width="80">Produc 


colspan="4">Item Details</th> 


field="listprice" widthz"80" align="right">List 
field-"unitcost" width="80" align="right">Unit 
width="100">Attribute</th> 
field="status" width="60" align="center">Staut: 


field="attri" 


下 载 jQuery EasyUl 实例 





W3School jQuery UI 教程 


jeasyui-datagrid-datagrid9.zip 


jQuery EasyUl 数据 网 格 - 创建 列 组 合 605 


jQuery EasyUl 数据 网 格 - 添加 复 选 框 


本 实例 演示 如 何 放 置 一 个 复 选 框 列 到 数据 网 格 (DataGrid) 。 通 过 复 选 框 ， 用 户 将 
可 以 选择 选中 /取消 选中 网 格 行 数 据 。 


y Checkbox Select 











Item ID Product ID List Price Unit Cost Attribute Status 
[P] : EST-1 FI-S¥-01 16.5 10 Large P 全 
EST-10 K3-DL-01 18.5 12 Spotted Adult Female P 








m 


[P] : EST-11 RP-SN-01 18.5 12 Venomless P 





EST-14 FL-DSH-01 58.5 12 Tailless 了 




















EST-15 FL-DSH-01 23.5 12 With tail P 
FST-1R FT-TITH-n27 93 5 1? Adult Female P m 
10 - Pagel of 3 b bi 4 Displaying 1 to 10 of 28 items 


了 添加 一 个 复 选 框 列 ， 我 们 仅仅 需要 添加 一 个 列 的 checkbox 属性 ， 并 设置 它 为 
me 代码 如 下 所 示 : 


<table id="tt" title="Checkbox Select" class="easyui-datagrid" 
url="data/datagrid_data.json" 
idField="itemid" pagination="true" 
iconCls="icon-save"> 
<thead> 
<tr> 
<th field="ck" checkbox="true"></th> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="100">Attribute</th> 
«th field="status" width="60" align="center">Status 
</tr> 
</thead> 
</table> 


ye 


以 上 代码 添加 了 一 个 带 有 checkbox 属性 的 列 ， 所 以 它 将 成 为 复 选 框 列 。 如 果 
idField 属性 已 设置 ， 数 据 网 格 (DataGrid) 的 选择 集合 将 在 不 同 的 页 面 保持 。 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid10.zip 


jQuery EasyUl 数据 网 格 - 目 定 义 分 页 


数据 网 格 (datagrid) 内 置 一 个 很 好 特性 的 分 页 功能 ， ee 在 本 教 
我 们 将 创建 一 个 数据 网 格 (datagrid) ， 并 在 分 页 工具 栏 上 添加 一 些 自 定义 
安 钮 。 


[a] Load Data 

Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-S"-01 16.5 10 Large P A 
EST-10 K3-DL-01 18.5 12 Spotted Adult Female P 

EST-11 RP-SN-01 18.5 12 Venomless E 

EST-12 RP-SN-01 18.5 12 Rattleless P = 
EST-13 RP-LI-02 18.5 12 Green Adult P 

EST-14 FL-DSH-01 58.5 12 Tailless F 

EST-15 FL-DSH-01 23:5 12 With tail P 

EST-18 FL-DLH-02 93.5 12 Adult Female P - 


Page] £3 bh A 4 Displaying 1 to 10 of 28 items 
创建 数据 网 格 (DataGrid) 


<table id="tt" title="Load Data" class="easyui-datagrid" style: 
url="data/datagrid_data.json" 
iconCls="icon-save" pagination="true"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
«th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="100">Attribute</th> 
«th field="status" width="60" align="center">Staut: 
</tr> 
</thead> 
</table> 





请 记得 ， 设 置 'pagination' 属性 为 true， 这 样 才 会 生成 分 页 工具 栏 。 


自 定义 分 页 工具 栏 


var pager = $('#tt').datagrid('getPager'); // get the pager 
pager .pagination({ 
showPageList: false, 
buttons: [{ 
iconCls:'icon-search', 
handler:function()( 
alert('search'); 
} 


3,1 
iconCls:'icon-add', 
handler: function(){ 

alert('add'); 
} 


}{ 
iconCls:'icon-edit', 
handler: function(){ 

alert('edit'); 
} 


i], 


onBeforeRefresh:function()( 
alert('before refresh'); 
return true; 





正如 您 所 看 到 的 ， 我 们 首先 得 到 数据 网 格 (datagrid) 的 pager 对 象 ， 然 后 重新 创 
建 分 页 (pagination) 。 我 们 隐藏 页 面 列 表 ， 并 添加 三 个 新 的 按钮 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid11.zip 


jQuery EasyUl 数据 网 格 - 启用 行内 编辑 


可 编辑 的 功能 是 最 近 添 加 到 数据 网 格 (datagrid) 的 。 它 可 以 使 用 户 添加 一 个 新 行 
到 数据 网 格 (datagrid) 。 用 户 也 可 以 更 新 一 个 或 多 个 行 。 
本 教程 向 您 展示 如 何 创 建 一 个 数据 网 格 (datagrid) 和 内 联 编辑 器 。 


f Editable DataGrid 


Item ID Product 
EST-1 Koi 

EST-10 Dalmation 
EST-11 Rattlesnake 
EST-12 Rattlesnake 


Koi 
Dalmation 
Rattlesnake 





Iguana 
——— Manx 


Persian 


List Price Unit Cost Attribute 


16.5 10 Large 

16.5 12 Spotted Adult Female 
vi18.5 12 Venomless 

18.5 12 Rattleless 


| ÁN This field is required. Green Adult 


58.5 12 Tailless 
23.5 12 With tail 
93.5 12 Adult Female 


93.5 12 Adult Male 


Amazon Parrot 


创建 数据 网 格 (DataGrid) 


$(function(){ 
$('#tt').datagrid({ 


title: 'Editable DataGrid', 
iconCls:'icon-edit', 
width: 660, 

height:250, 
singleSelect:true, 
idField:'itemid', 
url:'datagrid_data.json', 
columns: [[ 


Status 


Action 


Edit Delete ^ 


Edit Delete 


Save Cancel 


Edit Delete 





"m 


Edit Delete 


Edit Delete 


Edit Delete 


Edit Delete 


(field:'itemid',title:'Item ID',width:60}, 
(field:'productid',title:'Product',width:100, 


formatter:function(value)( 


for(var i-0; i«products.length; i++){ 
if (products[i].productid 


} 

return value; 
3 
editor:{ 


type: 'combobox', 


value) ret 


options: { 
valueField: 'productid', 
textField:'name', 
data:products, 
required:true 


j 
tr 
(field:'listprice',title:'List Price',width:80, alic 
(field:'unitcost',title:'Unit Cost',width:80, align 
{field:'attri',title: 'Attribute',width:150, editor: 
{field:'status', title: 'Status',width:50,align: 'cent 


editor:{ 
type: 'checkbox', 
options: { 
onm p 
Opa a 
j 
j 


ty 
{field:'action', title: 'Action',width:70,align: 'cent 
formatter: function(value, row, index) { 
if (row.editing) { 


var s = ‘<a href="#" onclick-"saverow(í 
var c = ‘<a href="#" onclick-"cancelrov 
return stc; 

) else { 
var e '«a href="#" onclick="editrow(1 


var d "<a href="#" onclick="deleterov 
return etd; 


} 
]], 


onBeforeEdit:function(index,row)( 
row.editing - true; 
updateActions(index); 

ty 

onAfterEdit: function( index, row) { 
row.editing = false; 
updateActions(index) ; 

ty 

onCancelEdit : function( index, row) { 
row.editing = false; 
updateActions(index) ; 

} 

}); 
}); 


function updateActions(index){ 
$('#tt').datagrid('updateRow',{ 
index: index, 
row: {} 


3): 








为 了 启用 数据 网 格 行内 编辑 ， 您 应 该 添加 一 个 editor 属性 到 列 中 。 编 辑 器 
(editor) 会 告诉 数据 网 格 (datagrid) 如 何 编辑 字段 及 如 何 保存 字段 值 。 正 如 您 所 
看 到 的 ， 我 们 定义 的 三 个 编辑 器 (editor) : text, combobox 和 checkbox. 


function getRowIndex(target) { 
var tr = $(target).closest('tr.datagrid-row'); 
return parseInt(tr.attr('datagrid-row-index')); 


function editrow(target){ 
$('#tt').datagrid('beginEdit', getRowIndex(target) ); 


function deleterow(target){ 
$.messager.confirm('Confirm','Are you sure?', function(r){ 
if (r){ 
$('#tt').datagrid('deleteRow', getRowIndex(target): 
} 


}); 


function saverow(target){ 
$('#tt').datagrid('endEdit', getRowIndex(target)); 


function cancelrow(target){ 
$('#tt').datagrid('cancelEdit', getRowIndex(target)); 


LESE ü O O 





FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid12.zip 


jQuery EasyUl 数据 网 格 - 扩展 编辑 器 


一 些 常见 的 编辑 器 (editor) 添加 到 数据 网 格 (datagrid) ， 以 便 用 户 编辑 数据 。 所 
有 的 编辑 器 (editor) 都 定义 在 $.fn.datagrid.defaults.editors 对 象 中 ， 这 个 可 以 继 
承 扩 展 以 便 支持 新 的 编辑 器 (editor). 本 教程 将 向 您 展示 如 何 添加 一 个 新 的 
numberspinner 编辑 器 到 数据 网 格 (datagrid) 。 


@ Editable DataGrid 





Item ID List Price Unit Cost Attribute Status Action 
EST-1 16.5 10 Large P Edit Delete — ^ 
EST-10 18.5 12 Spotted Adult Female P Edit Delete 
EST-11 18.5 12 Venomless P Edit Delete 
18.5 12 ^ | Rattleless — (| Save Cancel | 
EST-13 18.5 12 Green Adult P Edit Delete | 
EST-14 58.5 12 Tailless P Edit Delete 
EST-15 23.5 12 With tail P Edit Delete 
EST-16 93.5 12 Adult Female P Edit Delete 
EST-17 93.5 12 Adult Male P Edit Delete ~ 


继承 扩展 numberspinner 编辑 器 


$.extend($.fn.datagrid.defaults.editors, { 
numberspinner: { 

init: function(container, options) { 
var input = $('«input type="text">').appendTo(conté 
return input.numberspinner (options); 

tr 

destroy: function(target) { 
$(target).numberspinner('destroy'); 


tr 
getValue: function(target){ 
return $(target).numberspinner('getValue' ); 


tr 
setValue: function(target, value) { 
$( target) .numberspinner('setValue', value); 


resize: function(target, width) { 
$(target).numberspinner('resize',width); 


3): 








f£ html 标记 中 创建 数据 网 格 (DataGrid) 


«table id="tt" style="width: 600px; height :250px" 
url="data/datagrid_data.json" title="Editable DataGrid' 
singleSelect-"true" idField-"itemid" fitColumns-"true": 

<thead> 
<tr> 
<th field="itemid" width="60">Item ID</th> 
«th field-"listprice" width="80" align="right" edil 
«th field-"unitcost" width="80" align="right" edit: 
«th field="attri" width="180" editor="text">Attribt 
«th field="status" width="60" align="center" edito! 
<th field="action" width="80" align="center" format 
</tr> 
</thead> 
</table> 


a mE 


我 们 分 配 numberspinner 编辑 器 到 ‘unit cost’ 字段 。 当 开 始 编辑 一 行 ， 用 户 可 以 通 
过 numberspinner 编辑 器 来 编辑 数据 。 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid23.zip 


jQuery EasyUl 数据 网 格 - 列 运 算 


在 本 教程 中 ， 您 将 学 习 如 何在 可 编辑 的 数据 网 格 (datagrid) 中 包含 一 个 运算 的 
列 。 一 个 运算 列 通常 包含 一 些 从 一 个 或 多 个 其 他 列 运算 的 值 。 


@ Editable DataGrid with Calculated Column 


Item ID List Price 
EST-1 
E 


ST-1 
EST-11 

S 

S 





EST-12 

EST-13 

EST-14 58. 5 
EST-15 

EST-16 

EST-17 

EST-18 1 


16. 


bet 


D 


92 
2 


éd. 


Ca 


vo. 


52 


vo. 


52 


195. 


à à m 
eo eo eo eo 


ut ut ut ut ow 


ut ut ut ut 


rp 


Amount Unit Cost Attribute Status 
10 Large P 
12 Spotted Adult Female 
12 Venozless 
2 Rattleless 


T Green Adult 


P 
P 
P 
117 Tailless 
P 
P 
P 
P 


M 
c 


12 With tail 
12 Adult Female 
12 Adult Male 


92 Adult Male 


首先 ， 创 建 一 个 可 编辑 的 数据 网 格 (datagrid) 。 这 里 我 们 创建 了 一 些 可 编辑 
Jij, 'listprice', 'amount' 和 'unitcost' 列 定义 为 numberbox 编辑 类 型 。 运 算 列 是 
unitcost 字段 ， 将 是 listprice FLA amount 列 的 结果 。 


<table id="tt" style="width:600px;height:auto" 
title="Editable DataGrid with Calculated Column" iconC: 
idField="itemid" url="data/datagrid_data.json"> 


<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
«th field-"listprice" width="80" align="right" edil 
«th field-"amount" width="80" align="right" editor: 
«th field-"unitcost" width="80" align="right" edit: 
«th field="attri" width="150" editor="text">Attribt 
«th field="status" width="60" align="center" edito! 
</tr> 
</thead> 
</table> 
<] — B 





当 用 户 点 击 一 行 的 时 候 ， 我 们 开始 一 个 编辑 动作 。 


var lastIndex; 
$('#tt').datagrid({ 
onClickRow: function(rowIndex) { 
if (lastIndex != rowIndex){ 
$('#tt').datagrid('endEdit', lastIndex); 
$('#tt').datagrid('beginEdit', rowIndex); 
setEditing(rowIndex); 
} 
lastIndex = rowIndex; 
} 
3); 


为 了 在 一 些 列 之 间 创 建 运算 关系 ， 我 们 应 该 得 到 当前 的 editors， 并 绑 定 一 些 事件 到 
它们 上 面 。 


function setEditing(rowIndex) { 
var editors = $('#tt').datagrid('getEditors', rowIndex); 
var priceEditor = editors[0]; 
var amountEditor = editors[1]; 
var costEditor = editors[2]; 
priceEditor.target.bind('change', function(){ 
calculate(); 


, 
amountEditor.target.bind('change', function()( 
calculate(); 
3): 
function calculate(){ 
var cost = priceEditor.target.val() * amountEditor.tart( 
$(costEditor.target).numberbox('setValue',cost); 





FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid15.zip 


jQuery EasyUl 数据 网 格 - 合并 单元 格 
数据 网 格 (datagrid) 经 常 需要 合并 一 些 单元 格 。 本 教程 将 向 您 展示 如 何在 数据 网 
格 (datagrid) 中 合并 单元 格 。 


为 了 合并 数据 网 格 (datagrid) 单元 格 ， 只 需 简 单 地 调用 'mergeCells' 方法 ， 并 传 
入 合并 信息 参数 ， 告 诉 数据 网 格 (datagrid) 如 何 合并 单元 格 。 在 所 有 合并 的 单元 
格 中 ， 除 了 第 一 个 单元 格 ， 其 它 单元 格 在 合并 后 被 隐藏 。 


y Merge Cells 


Price 
Product Item ID Attribute Status 
List Price Unit Cost 
1 Koi EST-1 16.5 10 Large F ^ 
2 Dalmation EST-10 16.5 12 Spotted Adult Female P 
d EST-11 18.5 12 Venomless P 
Rattlesnake 
4 EST-12 18.5 12 Rattleless P — 
5 Iguana EST-13 18.5 12 Green Adult P 
6 EST-14 58.5 12 Tailless E 
Manx 
n EST-15 23.5 12 With tail P 
8 EST-16 93.5 12 Adult Female P 
Persian + 
9 EST-1T no C 19 A dela 988.17. D 
4 m + 
10 - i Pagel of 3 > bi p^ Displaying 1 to 10 of 28 items 


创建 数据 网 格 (DataGrid) 


«table id="tt" title-"Merge Cells" style="wWwidth:550px; height :2! 
url="data/datagrid_data.json" 
SingleSelect="true" iconCls="icon-save" rownumbers="trt 
idField="itemid" pagination="true"> 
«thead frozen="true"> 
<tr> 
«th field="productid" width="80" formatter="formatt 
<th field="itemid" width="100">Item ID</th> 
</tr> 
</thead> 
<thead> 
<tr> 
<th colspan="2">Price</th> 
<th rowspan="2" field="attri" width="150">Attribute 
«th rowspan="2" field-"status" width="60" align="ce 
</tr> 
<tr> 
«th field-"listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
</tr> 
</thead> 
</table> 


B — y} 
合并 单元 格 


当 数 据 加 载 之 后 ， 我 们 合并 数据 网 格 (datagrid) 中 的 一 些 单元 格 ， 所 以 放置 下 面 
的 代码 在 onLoadSuccess Eha BAX. 





$('#tt').datagrid({ 
onLoadSuccess: function(){ 
var merges = [{ 
index:2, 
rowspan:2 
hti 
index:5, 
rowspan:2 
it 
index:7, 
rowspan:2 
Jl; 
for(var i=0; i«merges.length; i++) 
$('#tt').datagrid('mergeCells', { 
index:merges[i].index, 
field: 'productid', 
rowspan:merges[i].rowspan 


}); 
3); 


下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid13.zip 


jQuery EasyUl 数据 网 格 - 创建 自 定 义 视 图 


在 不 同 的 情况 下 ， 您 可 能 需要 为 数据 网 格 Coe 运用 更 灵活 的 布局 。 对 于 用 
户 来 说 ， 卡 片 视图 (Card View) 是 个 不 错 的 选择 。 这 个 工具 可 以 在 数据 网 格 
(datagrid) 中 迅速 获 天 取 和 显示 数据 。 在 数据 网 格 (iu 的 头 部 ， 您 可 以 仅仅 


本 教程 将 向 您 展示 如 何 创 建 自 定 义 卡 片 视图 (Card 
View 


DataGrid 一 CardView 


Item ID List Price Unit Cost Attribute Status 
A 

Item ID: EST-1 

d : E 
List Price: 16.5 

e 

M Unit Cost: 10 

i Attribute: Large 
Status: P 


Item ID: EST-10 


List Price: 





Unit Cost: 
Attribute: Spotted Adult Fezale 
Status- P 


创建 卡片 视图 (Card View) 


从 数据 网 格 (datagrid) 的 默认 视图 继承 ， 是 个 创建 自 定义 视图 的 不 错 方 法 。 我 们 
将 要 创建 一 个 卡片 视图 (Card View) 来 为 每 行星 示 一 些 信息 。 


var cardview = $.extend({}, $.fn.datagrid.defaults.view, { 
renderRow: function(target, fields, frozen, rowIndex, rowD: 
var cc = []; 
cc.push('«td colspan=' + fields.length + ' style="padd: 
if (!frozen){ 
var aa = rowData.itemid.split('-'); 
var img = 'shirt' + aa[1] + '.gif'; 
cc.push('«img src="images/' + img + '" style-'widtl 
cc.push('«div style-"float:left;margin-left:20px;": 
for(var i-0; i«fields.length; i++){ 
var copts - $(target).datagrid('getColumnOptior 
cc.push('«p»«span class="c-label">' + copts.til 


cc.push('«/div»'); 


cc.push('«/td»'); 
return cc.join(''); 





创建 数据 网 格 (DataGrid) 
现在 我 们 使 用 视图 创建 数据 网 格 (datagrid) 。 


«table id="tt" style="width:500px; height : 400px" 
title-"DataGrid - CardView" singleSelect-"true" fitColi 
url-"datagrid8 getdata.php" pagination="true" sortOrde! 

«thead» 
«tr» 
«th field-"itemid" width="80" sortable="true">Item 
«th field-"listprice" width="80" sortable="true">L: 
«th field-"unitcost" width="80" sortable="true">Un: 
«th field="attri" widthz"150" sortable="true">Attr: 
«th field="status" width="60" sortable="true">Statt 
</tr> 
</thead> 
</table> 


4 aaa 





$('#tt').datagrid({ 
view: cardview 


3); 


请 注意 ， 我 们 设置 view 属性 ， 且 它 的 值 为 我 们 的 卡片 视图 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid16.zip 


jQuery EasyUl 数据 网 格 - 创建 页 脚 摘要 


在 本 教程 中 ， 我 们 将 向 您 展示 如 何在 数据 网 格 (datagrid) 页 脚 显示 摘要 信息 行 。 





DataGrid 
Product Name Unit Price 

1 Chai 18 p 

2 Chang 19 

3 Aniseed Syrup | F 

4 Chef Anton s Cajun Seasoning 22 

5 Chef Anton’ s Gumbo Mix 21.35 

& Grandma’ s Boysenberry Spread 25 |. 
Total 282.35 
Average 31.31. 


为 了 显示 页 脚 行 ， 您 应该 设置 showFooter 属性 为 true， 然 后 准 各 定义 在 数据 网 格 
(datagrid) 数据 中 的 页 脚 行 。 以 下 是 示例 数据 : 


("total":1,"rows":[("id":1,"name":"Chai","price":18.00)], "foot« 


I | rg —3À—À— — á— 15] 
创建 数据 网 格 (DataGrid) 





<table id="tt" title="DataGrid" class="easyui-datagrid" style=' 
url-"data/datagrid17 data.json" 
fitColumns-"true" rownumbers="true" showFooter="true"> 
<thead> 
<tr> 
<th field="name" width="80">Product Name</th> 
«th field="price" width="40" align="right">Unit Pr: 
</tr> 
</thead> 
</table> 


" 一 一 一 
页 脚 行 和 显示 数据 行 一 样 ， 所 以 您 可 以 在 页 脚 显示 不 止 一 个 摘要 信息 。 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid17.zip 


jQuery EasyUl 数据 网 格 - 条 件 设 置 行 育 景 颜 色 


本 教程 将 向 您 展示 如 何 根据 一 些 条 件 改变 数据 网 格 (datagrid) 组 件 的 行 样式 。 当 
listprice 值 大 于 50 时 ， 我 们 将 为 该 行 设 置 不 同 的 颜色 。 


DataGrid 

Item ID Product ID List Price Unit Cost Attribute Status 

EST-1 FI-S¥-01 36.5 10 Large F 一 
EST-10 K3-DL-01 18.5 12 Spotted Adult Female 了 

EST-11 RP-SN-01 28.5 12 Venomless F E 
EST-12 RP-SN-01 25.5 12 Rattleless P 

EST-13 RP-LI-02 35.5 12 Green Adult P 
EST-14 FL-DSH-01 158.5 12 Tailless P 
EST-15 FL-DSH-01 83.5 12 With tail P 

EST-16 FL-DLH-02 83:5 12 Adult Female P 
EST-1T FL-DLH-02 89.5 12 Adult Male P 

EST-1 FI-SW-01 36.5 10 Large Ep 

EST-10 K3-DL-01 18.5 12 Spotted Adult Female P 

EST-11 RP-SN-01 28.5 12 Venomless E m 


数据 网 格 (datagrid) 的 rowStyler 函数 的 设计 目的 是 允许 您 自 定义 行 样式 。 以 下 代 
码 展示 如 何 改 变 行 样式 : 


«table id="tt" title="DataGrid" style-'width:600px;height:250p; 
url="data/datagrid_data.json" 
singleSelect-"true" fitColumns="true"> 
<thead> 
<tr> 
<th field="itemid" width="80">Item ID</th> 
<th field="productid" width="80">Product ID</th> 
«th field-"listprice" width="80" align="right">Lis1 
<th field="unitcost" width="80" align="right">Unit 
<th field="attri" width="150">Attribute</th> 
«th field="status" width="60" align="center">Staut: 
</tr> 
</thead> 
</table> 





$('#tt').datagrid({ 
rowStyler : Function(index, row) { 
if (row. listprice>50) { 
return 'background-color:pink;color:blue; font -weigl 
} 
} 
}); 





= — HR 
背景 色 ) 为 pink (33 





«| 


正如 您 所 看 到 的 ， 我 们 根据 一 些 条 件 设 置 background-color ( 
红包) ， 设 置 文本 颜色 为 blue (#8). 


下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid18.zip 


jQuery EasyUl 数据 网 格 - 创建 属性 网 格 


属性 网 格 (property grid) 带 有 一 个 内 置 的 expand (RF) /collapse (合并 ) 按 
钮 ， 可 以 简单 地 为 行 分 组 。 您 可 以 简单 地 创建 一 个 可 编辑 属性 的 分 层 
(hierarchical) 列表 。 





Name Value 
c ID Settings 
Name Bill Smith 
Address 
40 
01/02/2012 四 | 
SSN 123-456-7890 
c Marketing Settings 
Ezail bill@gmail. coz 
FrequentBuyer false 


设置 HTML 


«table id="tt" class="easyui-propertygrid" style="width :300px" 
url-"propertygrid data.json" 


showGroup="true" scrollbarSize="0" 
></table> 


图 --- gh 
准备 json 数据 


{"name": "Name", "value":"Bill Smith", "group":"ID Settings",' 
("name" : "Address", "value":"", "group": "ID Settings", "editor' 
("name" : "Age", "value" :"40", "group" :"ID Settings", "editor":' 
("name":"Birthday","value":"01/02/2012","group":"ID Settin( 
("name" : "SSN", "value" :"123-456-7890", "group": "ID Settings", 
("name":"Email","value":"billQgmail.com"," "group":"Marketin( 

"type" :"validatebox'", 

"options":{ 

"validType":"email" 
} 


3 
("name":"FrequentBuyer", "value":"false","group":" Marketing 
"type" :"checkbox", 
"options":{ 
"on":true, 
"off":false 





正如 您 所 看 到 的 ， 属 性 网 格 (property grid) 的 创建 不 需要 任何 的 javascript 代码 。 
您 可 以 简单 地 继承 扩展 editor 类 型 。 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid20.zip 


jQuery EasyUl 数据 网 格 - 扩展 行 显 示 细 节 


数据 网 格 (datagrid) 可 以 改变 它 的 视图 (view) 来 显示 不 同 的 效果 。 使 用 详细 视 
图 ， 数 据 网 格 (datagrid) 可 以 在 数据 行 的 左边 显示 展开 按钮 ("+ UH OUS) o 
户 可 以 展开 行 来 显示 附加 的 详细 信息 。 


DataGrid — Expand Row 


Item ID Product ID List Price Unit Cost Status 


qn EST-1 FI-SW-01 16.5 


10 P : 


EST-10 : i 18.5. m F | 
| 

Item ID: EST-10 Product ID: K9-DL-01 É 

List Price: 18.5 Unit Cost: 12 | | 
Attribute: | 





Spotted Adult Female 


= EST-i1 RF-SN-01 18.5 12 P 


À Item ID- EST-11 Product ID- RP-SN-01 
? List Price- 18.5 Unit Cost: 12 


Attribute: Venozless 


步骤 1 : 创建 数据 网 格 (DataGrid) 


«table id="dg" style="width: 500px; height: 250px" 
url="datagrid8_getdata.php" 
pagination="true" sortName="itemid" sortOrder="desc" 
title="DataGrid - Expand Row" 


singleSelect-"true" fitColumns="true"> 
<thead> 


<tr> 


<th field="itemid" width="60">Item ID</th> 

<th field="productid" width="80">Product ID</th> 
«th field="listprice" align="right" width="70">Lis1 
<th field="unitcost" align="right" width="70">Unit 


«th field="status" width="50" align="center">Statu: 
</tr> 


</thead> 
</table> 


4 aa 





步骤 2: 为 数据 网 格 (DataGrid) 设置 详细 视图 
为 了 使 用 详细 视图 ， 请 记得 在 页 面 头 部 引用 视图 脚本 文件 。 


«script type="text/javascript" src="http://www.w3cschool.cc/try/jez 


到 — 














$('#dg').datagrid({ 
view: detailview, 
detailFormatter: function( index, row) { 
return '«div class="ddv" style="padding:5px 0"></div>'; 
ty 


onExpandRow: function( index, row) { 
var ddv = $(this).datagrid('getRowDetail',index).find('div 
ddv.panel({ 
border:false, 
cache: false, 


href: 'datagrid21 getdetail.php?itemid='+row.itemid, 
onLoad: function(){ 


$('#dg').datagrid('fixDetailRowHeight', index); 


$('#dg').datagrid('fixDetailRowHeight', index); 





我 们 定义 'detailFormatter' WW, EGEA (datagrid) 如 何 泻 染 详细 视图 。 
在 这 种 情况 下 ,我 们 返回 一 个 简单 的 '<div>' 元 素 ， 它 将 充当 详细 内 容 的 容器 。 请 注 
意 ， 详 细 信 息 为 空 。 当 用 户 点 击 展 开 按钮 (+') 时 ，onExpandRow 事件 将 被 触 
发 。 所 以 我 们 可 以 写 一 些 代 码 来 加 载 ajax 详细 内 容 。 最 后 我 们 调用 
fixDetailRowHeight' 方法 来 固定 当 详 细 内 容 加 载 时 的 行 高 度 。 


步骤 3 : BRA alin hy 


datagrid21_getdetail.php 


&lt;?php 
include once 'conn.php'; 


$itemid - mysql real escape string($ REQUEST['itemid']); 


$rs = mysql query("select * from item where itemid-'$itemid'"), 
$item = mysql fetch array($rs); 


?&gt; 
«table class="dv-table" border="0" style-'width:10096; "> 
<tr> 
«td rowspan="3" style="width: 60px"> 
&1t; ?php 
$aa = explode('-',$itemid); 
$serno = $aa[1]; 
$img = "images/shirt$serno.gif"; 
echo "<img src=\"$img\" style=\"width:60px;margin-} 
?&gt; 
«/td» 


«td class="dv-label">Item ID: </td> 
<td>&lt;?php echo $item[ 'itemid'];?&gt; </td> 
<td class="dv-label">Product ID:</td> 
<td>&lt;?php echo $item[ 'productid' ];?&gt;</td> 
</tr> 
<tr> 
<td class="dv-label">List Price: </td> 
<td>&lt;?php echo $item['listprice'];?&gt;«/td» 
«td class="dv-label">Unit Cost:</td> 
<td>&lt;?php echo $item[ 'unitcost'];?&gt;</td> 
</tr> 
<tr> 
<td class="dv-label">Attribute: </td> 
<td colspan="3">&lt;?php echo $item['attr1'];?&gt;«/td» 
</tr> 
</table> 


a 850 IPS] 





FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid21.zip 


jQuery EasyUl 数据 网 格 - 创建 子 网 格 


使 用 数据 网 格 (datagrid) 的 详细 视图 ， 用 户 可 以 展开 一 行 来 显示 附加 的 详细 信 
息 。 任何 内 容 都 可 以 加 载 作为 行 详细 ， 子 网 格 也 可 以 动态 加 载 。 本 教程 将 向 您 展 
示 如 何在 主 网 格 上 创建 一 个 子 网 格 。 


DataGrid - SubGrid 


Item ID 


ap EST-12 





wn — 


4 


中 


ceT42 
Evi-ta 


Order ID 
1002 
1003 
1010 
1015 


EST-16 


sp EST-18 


Product ID 
RP-SN-01 


FL-DLH-02 
AV-CB-01 


List Price Unit Cost Attribute Status 
18.50 12.00 Rattleless P 一 


Quantity Unit Price 
1 18.50 
2 18.50 
1 18.50 
1 18.50 


93.50 12.00 Adult Female P 
193.50 92.00 Adult Male P E 


m 


步骤 1 : 创建 主 网 格 


«table id="dg" style="width: 700px; height :250px" 
url="datagrid22_getdata.php" 
title="DataGrid - SubGrid" 
singleSelect="true" fitColumns="true"> 


<thead> 
<tr> 


</thead> 


<th 
<th 
<th 
<th 
<th 
<th 


</tr> 


</table> 


E — UE 


field="itemid" width="80">Item ID</th> 
field-"productid" width="100">Product ID</th> 
field="listprice" align="right" width="80">List Pr: 
field="unitcost" align="right" width="80">Unit Cos! 
field="attri" width="220">Attribute</th> 
field-"status" width="60" align="center">Status</tl 





步骤 2 : 设置 详细 视图 来 显示 子 网 格 
为 了 使 用 详细 视图 ， 请 记得 在 页 面 头 部 引用 视图 脚本 文件 。 


«script type="text/javascript" src="http://www.w3cschool.cc/try/jez 





$('#dg').datagrid({ 
view: detailview, 
detailFormatter: function( index, row) { 
return '«div style="padding: 2px"><table class="ddv"></table 
ty 


onExpandRow: function( index, row) { 
var ddv = $(this).datagrid('getRowDetail',index).find('tab. 
ddv.datagrid({ 
url: 'datagrid22 getdetail.php?itemid='+row.itemid, 
fitColumns:true, 
singleSelect:true, 
rownumbers:true, 
loadMsg:'', 
height:'auto', 
columns:[[ 
(field:'orderid',title:'Order ID',width:100}, 
(field:'quantity',title:'Quantity',width:100), 
(field:'unitprice',title:'Unit Price',width:100) 
]l, 
onResize:function()( 
$('4dg').datagrid('fixDetailRowHeight',index); 


onLoadSuccess: function(){ 
setTimeout(function(){ 
$('#dg').datagrid('fixDetailRowHeight', index); 
3,9); 
} 
3); 
$('4dg').datagrid('fixDetailRowHeight',index); 





当 用 户 点 击 展 开 按钮 (+) BY, 'onExpandRow' 事件 将 被 触发 。 我 们 创建 一 个 新 
的 带 有 三 列 的 子 网 格 。 当 子 网 格 数据 加 载 成 功 时 或 者 改变 尺寸 大 小 时 ， 请 记得 对 主 
网 格调 用 'fixDetailRowHeight' 方法 。 


步骤 3 : BRA elim 


datagrid22 getdata.php 


$result = array(); 

include 'conn.php'; 

$rs - mysql query("select * from item where itemid in (select item: 
$items - array(); 


while($row = mysql fetch object($rs))( 
array push(S$items, $row); 
} 


echo json_encode($items) ; 





datagrid22 getdetail.php 


include 'conn.php'; 
$itemid = mysql real escape string($ REQUEST['itemid']); 
$rs = mysql query("select * from lineitem where itemid='$itemid'"), 
$items - array(); 
while($row = mysql fetch object($rs))( 
array push(S$items, $row); 
} 


echo json_encode($items) ; 


4] = poe 





下 载 jQuery EasyUl 实例 


jeasyui-datagrid-datagrid22.zip 


jQuery EasyUl 数据 网 格 - 使 用 虚拟 滚动 视图 显示 
海量 数据 


数据 网 格 (datagrid) 的 虚拟 滚动 特性 可 以 用 来 显示 大 数量 的 记录 而 不 需要 分 页 。 
当 滚 动 垂直 滚动 条 时 ， 数 据 网 格 (datagrid) 执行 ajax 请 求 来 加 载 和 刷新 现 有 的 记 
Ko 整个 刷新 的 行为 过 程 是 平稳 的 没有 闪烁 。 在 本 教程 中 ， 我 们 将 创建 一 个 数据 
网 格 (datagrid) ， 并 运用 虚拟 滚动 特性 从 服务 器 加 载 数据 。 


DataGrid - VirtualScrollView 





Inv No Date Name Amount Price Cost Note 
6279 INV6279 2012-10-05 Name29 94 113.01 10622.94 Note29 z 
6280 INV6280 2012-10-06 Name30 97 196.41 19051.77 Note30 
6281 INV6281 2012-10-07 Name31 81 111.97 9069.57 Note31 
6282 INV6282 2012-10-08 Name32 81 181.21 14678.01 Note32 
6283 INV6283 2012-10-09 Name33 68 159.96 10877.28 Note33 
6284 INV6284 2012-10-10 : 91 13.4 9871.89 Note34 
6285 INV6285 2012-10-11 Name35 92 191.35 17604.20 Note35 
6286 INV6286 2012-10-12 Name36 88 102.56 9025.28 Note36 i 
6287 INV6287 2012-10-13 Name37 63 190.51 12002.13 Note37 
6288 INV6288 2012-10-14 Name38 83 107.88 8954.04 Note38 X 


创建 数据 网 格 (DataGrid) 


为 数据 网 格 (datagrid) 运用 虚拟 滚动 特性 ，'Vview' 属性 点 该 设置 为 'scrollview'。 
用 户 应 该 从 数据 网 格 (datagrid) 扩展 下 载 scrollview， 并 在 页 面 头 部 引用 
scrollview 文件 。 


«script type="text/javascript" src="http://www.w3cschool.cc/try/jet 


i 人 刻 





«table id="tt" class="easyui-datagrid" style="width: 700px;height : 3¢ 
title="DataGrid - VirtualScrollView" 
data-options="view:scrollview, rownumbers: true, singleSelect 

url: 'datagrid27_getdata.php',autoRowHeight: false, pages: 


<thead> 
<tr> 
<th field="inv" width="80">Inv No</th> 
<th field="date" width="100">Date</th> 
<th field="name" width="80">Name</th> 
«th field-"amount" width="80" align="right">Amount</th: 
<th field="price" width="80" align="right">Price</th> 
<th field="cost" width="100" align="right">Cost</th> 
<th field="note" width="110">Note</th> 
</tr> 
</thead> 
</table> 





SS 1€ 


请 注意 ， 这 里 我 们 不 需要 使 用 pagination 属性 ， 但 pageSize 属性 是 必需 的 ， 这 样 
执行 ajax 请 求 时 ， 数 据 网 格 (datagrid) 将 从 服务 器 获取 指定 数量 的 记录 。 


服务 器 端 代码 
datagrid27_getdata.php 


isset($ POST['page']) ? intval($ POST['page']) : 1; 
isset($ POST['rows']) ? intval($ POST['rows']) : 50; 


$page 
$rows 


$items - array(); 
date default timezone set('UTC'); 
for($i-1; $i«-$rows; $i++){ 
$index = $i+($page-1)*Srows; 
$amount = rand(50,100); 
$price = rand(10000, 20000) /100; 
$items[] = array( 
'inv' => sprintf("INV%04d",$index), 
'date' => date('Y-m-d', time( )+24*3600*$i), 
'name' => 'Name' . $index, 
'note' => 'Note' . $index, 
'amount' => $amount, 
'price' => sprintf('%01.2f',$price), 
'cost' => sprintf('%01.2f', $amount*$price) 


); 
} 
$result = array(); 
$result['total'] = 8000; 
$result['rows'] = $items; 
echo json encode($result); 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid27.zip 


jQuery EasyUl 数据 网 格 - 添加 分 页 组 件 


本 实例 演示 如 何 从 服务 器 端 加 载 数据 ， 如 何 添加 分 页 组 件 (pagination) 到 数据 网 
格 (datagrid) 。 


[A Load Data 
Item ID 

11 EST-19 

12 EST2 

13 EST-20 

14 EST-21 

15 EST-2 





17 EST-24 
18 FST-25 
10 ~|| if 


Product ID 
AV-SB-02 
FI-SW-01 
FI-FW-02 
FI-FW-02 
K9-RT-02 


K9-RT-02 
K9-RT-02 
4 Page 2 





List Price Unit Cost Attribute Stauts 
15.50 2.00 Adult Male P ^ 
16.50 10.00 Small P 
5.50 2.00 Adult Male P 
529 1.00 Adult Female P =] 
135.50 100.00 Adult Male P 
255.50 92.00 Adult Male P 
3253 29 oN 00  Adnit Female P ix 
of3 | > >|% Displaying 11 to 20 of 28 items 


创建 数据 网 格 (DataGrid) 


为 了 从 远程 服务 器 端 加 载 数据 ， 您 应 该 设置 "url 属性 ， 在 您 的 服务 器 端 应 该 返回 
JSON 格式 数据 。 请 看 数据 网 格 (datagrid) 文档 得 到 更 多 关于 它 的 数据 格式 信 


NO 


«table id="tt" class="easyui-datagrid" style="width: 600px;heigl 
url="datagrid2_getdata.php" 

title="Load Data" iconCls="icon-save" 

rownumbers="true" pagination="true"> 


<thead> 


<tr> 


<th 
<th 
<th 
<th 
<th 
<th 


</tr> 


</thead> 


</table> 


E SS 


field="itemid" width="80">Item ID</th> 
field-"productid" width="80">Product ID</th> 
field="listprice" widthz"80" align="right">List 
field-"unitcost" width="80" align="right">Unit 
field="attri" width="150">Attribute</th> 
field="status" width="60" align="center">Staut: 





我 们 定义 数据 网 格 (datagrid) 列 ， 并 设置 'pagination' 属性 为 true， 它 将 在 数据 网 
格 (datagrid) 的 底部 生成 一 个 分 页 (pagination) 工具 栏 。pagination 将 发 送 两 个 
参数 到 服务 器 : 


e page: 页 码 ， 起 始 值 1。 


— e 


e rows : 每 页 显示 行 。 


AR A eer bin th a5 


$page = isset($ POST['page']) ? intval($ POST['page']) : 1; 
$rows = isset($ POST['rows']) ? intval($ POST['rows']) : 10; 
Ah 


$rs = mysql_query("select count(*) from item"); 
$row = mysql fetch row($rs); 
$result["total"] = $row[0]; 
$rs = mysql query("select * from item limit $offset,$rows"); 
$items - array(); 
while($row = mysql fetch object($rs))( 
array push(S$items, $row); 
$result["rows"] = $items; 


echo json encode($result); 


FA jQuery EasyUl 实例 


jeasyui-datagrid-datagrid2.zip 


jQuery EasyUl 窗口 


jQuery EasyUl 窗口 - 创建 简单 窗口 
创建 一 个 窗口 (window) 非常 简单 ， 我 们 创建 一 个 DIV 标记 : 


<div id="win" class="easyui-window" title="My Window" style="width 
Some Content. 
</div> 


«| = 








现在 运行 测试 页 面 ， 您 会 看 见 一 个 窗口 (window) 显示 在 您 的 屏幕 上 。 我 们 不 需 
写 任 何 的 javascript 代码 。 


My Window Sees 


Some Content. 


如 果 您 希望 创建 一 个 隐藏 的 窗口 (window) ， 记 得 设置 'closed' 属性 为 true' 14, 
您 可 以 调用 'open' 方法 来 打开 窗口 (window) 


<div id="win" class="easyui-window" title="My Window" closed="true' 
Some Content. 
</div> 


" -g 





$('#win').window('open'); 


作为 最 后 的 实例 演示 ， 我 们 创建 一 个 登录 窗口 (window) 


«div id="win" class="easyui-window" title="Login" style="width: 300; 
«form style-"padding:10px 20px 10px 40px;"> 
<p>Name: <input type="text"></p> 
<p>Pass: <input type="password"></p> 
<div style="padding: 5px; text-align:center;"> 
«a href="#" class="easyui-linkbutton" icon="icon-ok">0} 
«a href="#" class="easyui-linkbutton" icon="icon-cance- 
</div> 
</form> 
</div> 


«| nd 








Login Go] 


FA jQuery EasyUl 实例 


jeasyui-win-win1.zip 


jQuery EasyUl 窗口 - 自 定义 窗口 工具 栏 


默认 情况 下 ， 窗 口 (window) 有 四 个 工具 : collapsible、minimizable、 
maximizable 和 closable。 上 比如 我 们 定义 以 下 窗口 (window) 


«div id="win" class="easyui-window" title="My Window" style-z"p: 
window content 
</div> 








My Window Gees 


window content 


如 需 自 定义 工具 ， 设 置 该 工具 为 true 或 者 false。 比 如 我 们 希望 定义 一 个 窗口 
(window) ， 仅 仅 拥 有 一 个 可 关闭 的 工具 。 您 应 该 设置 任何 其 他 工具 为 false, $ 
们 可 以 在 标记 中 或 者 通过 jQuery 代码 定义 tools 属性 。 现 在 我 们 使 用 jQuery 代码 
来 定义 窗口 (window) 


$('#win' ) .window( { 
collapsible: false, 
minimizable: false, 
maximizable: false 


3): 


My Window xX 


window content 


如 果 我 们 希望 添加 自 定 义 的 工具 到 窗口 (window) ， 我 们 可 以 使 用 tools 属性 。 作 
为 实例 演示 ， 我 们 添加 两 个 工具 到 窗口 (window) 


$('#win' ) .window( { 
collapsible: false, 
minimizable: false, 
maximizable: false, 
tools: [{ 
iconCls:'icon-add', 
handler: function(){ 
alert('add'); 
} 


3; 


iconCls:'icon-remove', 

handler: function(){ 
alert('remove'); 

J 


3): 


My Window L2 = X 


window content 


FA jQuery EasyUl 实例 


jeasyui-win-win2.zip 


jQuery EasyUl 窗口 - 窗口 与 布局 


Layout 组 件 可 以 内 嵌 在 窗口 (window) 中 。 我 们 可 以 创建 一 个 复杂 的 布局 窗口 ， 
甚至 不 需要 宇 任 何 的 js 代码 。jquery-easyui 框架 帮 有 我 们 在 后 台 做 泻 染 和 调整 尺 
寸 。 


作为 一 个 实例 ， 我 们 创建 一 个 窗口 (window) ， 它 包含 两 个 部 分 ， 一 个 放置 在 左边 
一 个 放置 在 右边 。 在 窗口 (window) 的 左边 我 们 创建 一 个 树 形 菜单 (tree) ， 在 窗 
口 (window) 的 右边 我 们 创建 一 个 tabs 容器 。 





Layout Window aSa x) 
2 library . Home Contacts 
|E] easyui 
(=| Music jQuery easyui framework help you build your web page 
[E] Picture easily. 
[E] Database 








vf Ok 3€ Cancel 


«div class="easyui-window" title="Layout Window" icon="icon-he- 
<div class="easyui-layout" fit="true"> 
«div region="west" split="true" style="width:120px;"> 
«ul class="easyui-tree"> 


<li> 
<span>Library</span> 
<ul> 
<li><span>easyui</span></1i> 
<li><span>Music</span></1i> 
<li><span>Picture</span></1i> 
<li><span>Database</span></1i> 
</ul> 
</li> 
</ul> 


</div> 
<div region="center" border="false" border="false"> 
«div class="easyui-tabs" fit="true"> 
<div title="Home" style="padding:10px;"> 
jQuery easyui framework help you build yout 
</div> 
<div title="Contacts"> 
No contact data. 
</div> 
</div> 
</div> 
«div region-"south" border="false" style="text-align:r: 
«a class-"easyui-linkbutton" icon="icon-ok" href=": 
<a class="easyui-linkbutton" icon="icon-cancel" hre 
</div> 
</div> 
</div> 


nk IE 





请 看 上 面 的 代码 ， 我 们 仅仅 使 用 了 HTML 标记 ， 一 个 复杂 的 布局 窗口 (window) 
将 显示 。 这 就 是 jquery-easyui 框架 ， 简 单 而 强大 。 


FA jQuery EasyUl 实例 


jeasyui-win-win3.zip 


jQuery EasyUl 窗口 - 创建 对 话 框 


对 话 框 (Dialog) 是 一 个 特殊 的 窗口 (window) ， 可 以 包含 在 顶部 的 工具 栏 和 在 底 
部 的 按钮 。 默 认 情 况 下 ， 对 话 框 (Dialog) 不 能 改变 大 小 ， 但 是 用 户 可 以 设置 
resizable 属性 为 true， 使 其 可 以 改变 大 小 。 
y My Dialog 

Adi | [i Save 


Dialog Content. 


y Ok Cancel 


创建 对 话 框 (Dialog) 
对 话 框 (Dialog) 非常 简单 ， 可 以 从 DIV 标记 创建 ， 如 下 所 示 : 


«div id="dd" class="easyui-dialog" style="padding: 5px;width: 40( 
title="My Dialog" iconCls="icon-ok" 
toolbar="#dlg-toolbar" buttons="#dlg-buttons"> 

Dialog Content. 
</div> 


E 





准 各 工具 栏 (Toolbar) 和 按钮 (Button) 


<div id="dlg-toolbar"> 
<a href="#" class="easyui-linkbutton" iconCls="icon-add" p- 
<a href="#" class="easyui-linkbutton" iconCls="icon-save" | 
</div> 
<div id="dlg-buttons"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-ok" onc 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel' 
</div> 


了 — B 
上 面 的 代码 我 们 创建 了 一 个 带 有 工具 栏 (toolbar) 和 按钮 (button) 的 对 话 框 


(dialog) 。 这 是 对 话 框 (dialog) 、 工 具 栏 (toolbar) 、 内 容 (content) 和 按钮 
(buttons) 的 标准 配置 。 





FA jQuery EasyUl 实例 


jeasyui-win-dlg1.zip 


jQuery EasyUl 窗口 - 目 定 义 带 有 工具 条 和 按钮 的 
对 话 框 
您 可 以 创建 一 个 带 有 工具 栏 (toolbar) 和 按钮 (button) 的 对 话 框 (dialog) , 


以 从 HTML 标记 创建 。 这 个 教程 描述 如 何 添加 工具 栏 (toolbar) 和 按钮 burn) 
到 对 话 框 (dialog) ， 没 有 任何 的 javascript 代码 。 


My Dialog eG 


2 Edt Que \ 


Dialog Content. 


回 Save X Close 


e 


创建 对 话 框 (Dialog) 


<div id="dd" class="easyui-dialog" title="My Dialog" style="wic 
toolbar="#dlg-toolbar" buttons="#dlg-buttons"> 
Dialog Content. 
</div> 





创建 工具 栏 〈Toolbar) 


<div id="dlg-toolbar"> 
<table cellpadding="0" cellspacing="0" style="width: 100%"> 
<tr> 
<td> 
<a href="#" class="easyui-linkbutton" iconCls=' 
<a href="#" class="easyui-linkbutton" iconCls=' 
</td> 
«td style="text-align:right"> 
<input></input><a href="#" class="easyui-linkbt 
</td> 
</tr> 
</table> 
</div> 








创建 按钮 (Buttons) 


«div id="dlg-buttons"> 
<table cellpadding="0" cellspacing="0" style="width: 100%"> 
<tr> 
<td> 
<img src="email.gif"/> 
</td> 
«td style="text-align:right"> 
<a href="#" class="easyui-linkbutton" iconCls=' 
<a href="#" class="easyui-linkbutton" iconCls=' 
</td> 
</tr> 
</table> 
</div> 


mj -—g 





请 注意 ， 对 话 框 (dialog) 的 工具 栏 (toolbar) 和 按钮 (buttons) 属性 也 可 以 通过 
string 值 指定 ， 它 将 充当 作为 一 个 选择 器 去 选择 一 个 适当 的 DIV 元 素 ， 并 追加 到 工 
Be (toolbar) 或 者 按钮 (buttons) 的 位 置 。 


下 载 jQuery EasyUl 实例 


jeasyui-win-dlg2.zip 


jQuery EasyUl 树 形 菜单 


jQuery EasyUl 树 形 菜单 - fe Flo e| E REESE 3 


一 个 树 形 菜单 (Tree) 可 以 从 标记 创建 。easyui 树 形 菜单 (Tree) 也 可 以 定义 在 
<ul> 元 素 中 。 无 序列 表 的 <ul> 元 素 提 供 一 个 基础 的 树 (Tree) 结构 。 每 一 个 <li> 
元 素 将 产生 一 个 树 节点 ， 子 <ul> 元 素 闻 产生 一 个 父 树 节点 。 


4 Folder 
4 CISub Folder 1 
[2] File 11 
File 12 
File 13 
E File 2 
[2] File 3 
[2] File?1 








[uy [nj 


创建 树 形 菜单 (Tree) 


<ul class="easyui-tree"> 


<li> 
<span>Folder</span> 
<ul> 
<li> 
<span>Sub Folder 1</span> 
<ul> 
<li><span>File 11</span></1i> 
<li><span>File 12</span></1i> 
<li><span>File 13</span></1i> 
</ul> 
</li> 
<li><span>File 2</span></li> 
<li><span>File 3</span></li> 
</ul> 
</li> 
<li><span>File21</span></li> 
</ul> 


FA jQuery EasyUl 实例 


jeasyui-tree-tree1.zip 


jQuery EasyUl 树 形 菜单 - 创建 异步 树 形 菜单 


为 了 创建 异步 的 树 形 菜单 (Tree) ， 每 一 个 树 节 点 必须 要 有 一 个 'id' 属性 ， 这 个 将 
提交 回 服务 器 去 检索 子 节点 数据 。 
4 Node 1 
(Node 1.1 
[E] Node 1.2 


iJ [ug 四 
yy 
€ 
pe 
(m 





创建 树 形 菜单 (Tree) 


<ul id="tt" class="easyui-tree" 
url="tree2_getdata.php"> 
</ul> 


AR A ee bin tN a5 


$id = isset($ POST['id']) ? intval($ POST['id']) : 0; 
include 'conn.php'; 


$result - array(); 
$rs = mysql query("select * from nodes where parentId-$id"); 


while($row = mysql fetch array($rs))( 
$node - array(); 
$node['id'] - $row['id']; 
$node['text'] = $row['name']; 
$node['state'] = has child($row['id']) ? 'closed' : 'open', 
array_push($result, $node); 


} 


echo json_encode($result); 


function has_child($id){ 
$rs = mysql_query("select count(*) from nodes where parent: 
$row = mysql_fetch_array($rs); 
return $row[0] > 0 ? true : false; 








到 





FA jQuery EasyUl 实例 


W3School jQuery UI 教程 


jeasyui-tree-tree2.zip 


jQuery EasyUl 树 形 菜单 - 创建 异步 树 形 菜单 652 


jQuery EasyUl 树 形 菜单 - WR SRD ER 


本 教程 向 您 展示 如 何 附加 节点 到 树 形 菜单 (Tree) 。 我 们 将 创建 一 个 包含 水 果 和 蔬 
菜 节点 的 食品 树 ， 然 后 添加 一 些 其 他 水 果 到 已 存在 的 水 果 节 点 。 


4 CFoods 





apple 
orange 
getables 
tomato 


carrot 





cabbage 


Fri 
[z^ 
= 
Ve 
[zh 
[2 
[= 
[= 





potato 
lettuce 


II! 





I 


创建 食品 树 
首先 ， 我 们 创建 食品 树 ， 代 码 如 下 所 示 : 


<div style="width: 200px;height:auto;border:1px solid #ccc;"> 
«ul id="tt" class="easyui-tree" url="tree_data. json"></ul> 
</div> 


sy | 


请 注意 ， 树 (Tree) 组 件 是 定义 在 «ul» 标记 中 ， 树 节点 数据 从 URL 
"tree_data.json" 加 载 。 


#5 BAR 35 RA 


然后 我 们 通过 点 击 节点 选择 水 果 节 点 ， 我 们 将 添加 一 些 其 他 的 水 果 数 据 。 执 行 
getSelected 方法 得 到 人 处理 节 点 : 


var node = $('#tt').tree('getSelected'); 


getSelected 方法 的 返回 结果 是 一 个 javascript 对 象 ， 它 有 一 个 id. text, target 属 
性 。target 属性 是 一 个 DOM 对 象 ， 引 用 选中 节点 ， 它 的 append 方法 将 用 于 附加 
子 节点 。 


BON 73 aR 


var node = $('#tt').tree('getSelected'); 


if (node) { 
var nodes = [{ 
quld 
"text" :"Raspberry" 
t 
Male ee eate 
"text" :"Cantaloupe" 
l; 


$('#tt').tree('append', ( 
parent:node.target, 
data:nodes 


3): 


当 添 加 一 些 水 果 ， 您 将 看 见 : 


4 © Foods 





[E] apple 

[E] orange 

=) Raspberry 
[2] Cantaloupe 
4 © Vegetables 
B tomato 

B carrot 

[E] cabbage 
国 potato 

E lettuce 





正如 您 所 看 到 的 ， 使 用 easyui By (Tree) 插件 去 附加 节点 不 是 那么 的 难 。 


下 载 jQuery EasyUl 实例 


jeasyui-tree-tree3.zip 


jQuery EasyUl 树 形 菜单 - 创建 带 复 选 框 的 树 形 菜 
单 


easyui 的 树 (Tree) 插件 允许 您 创建 一 a 如 果 您 点 击 点 的 复 选 
框 ， 这 个 点 击 的 节点 信息 将 向 上 和 向 下 继承 。 例 如 : 点 击 tomato' ae 
您 将 会 看 见 Vegetables' 节点 现在 仅仅 选中 部 分 。 


4 Sm Foods 
Oo Fruits 

4 Cy[u] Vegetables 
[8] tomato 
[2 [v] carrot 
[3 L1 cabbage 
E) [v] potato 
(=) [ ]1ettuce 





创建 复 选 框 树 


<ul id="tt" class="easyui-tree" 
url="data/tree_data.json" 
checkbox="true"> 

</ul> 


FA jQuery EasyUl 实例 


jeasyui-tree-tree4.zip 


jQuery EasyUl HER % - 树 形 菜单 拖 放 控制 


当 在 一 个 应 用 中 使 用 树 (Tree) 插件 ， 拖 搜 (drag) 和 放置 (drop) 功能 要 求 允 许 


用 户 改 变节 点 位 置 。 启 用 拖 搜 (drag) 和 放置 (drop) HF, AA 


把 树 (Tree) 插件 的 'dnd' 属性 设置 为 true, 


4 V Folderl 


=, wf File3 
> File3 
E] Files 

C Languages 


创建 树 形 菜单 (Tree) 


$('#tt').tree({ 
dnd: true, 
url: 'tree_data.json' 


3): 


您 需要 做 的 就 是 


当 在 一 个 树 节点 上 发 生 放 置 操作 ，'onDrop' 事件 将 被 触发 ， 您 应 该 做 一 些 或 更 多 的 


操作 ， 例 如 保存 节点 状态 到 远程 服务 器 端 ， 等 等 。 


onDrop: function(targetNode, source, point){ 


var targetId = $(target).tree('getNode', targetNode).id; 


$.ajax({ 

Ue le 

type: 'post', 

dataType: 'json', 

data: { 
id: source.id, 
targetId: targetId, 
point: point 


3); 


FA jQuery EasyUl 实例 


jeasyui-tree-tree5.zip 


jQuery EasyUl WER X -WEE 3- TI 3 ASI PR 


通常 表示 一 个 树 节点 的 方式 就 是 在 每 一 个 节点 存储 一 个 parentid。 这 个 也 被 称 为 邻 
接 列 表 模 型 。 直接 加 载 这 些 数据 到 树 形 菜单 (Tree) 是 不 允许 的 。 但 是 我 们 可 以 
在 加 载 树 形 菜单 之 前 ， 把 它 转换 为 标准 标准 的 树 形 菜单 (Tree) 数据 格式 。 树 
(Tree) 插件 提供 一 个 "loadFilter' 选项 男 数 ， 它 可 以 实现 这 个 功能 。 它 提 供 一 个 机 
会 来 改变 任何 一 个 进入 数据 。 本 教程 向 您 展示 如 何 使 用 loadFilter HAIR A/F 
节点 到 树 形 菜单 (Tree). 





4 司 Foods 
4 Fruits 
=) apple 
=) orange 
4 3j Vegetables 
[E] tomato 
=) carrot 
国 cabbage 
=) potato 
[2] lettuce 
父 / 子 节 点 数据 


{"id":1,"parendId":0, "name":"Foods"}, 
{"id":2, "parentId":1, "name":"Fruits"}, 
"id":3,"parentId":1, "name":"Vegetables"), 
("id":4,"parentId":2, "name":"apple"), 
("id":5,"parentId":2, name":"orange"?, 
("id":6,"parentId":3, "name":"tomato"}, 
("id":7,"parentId":3,"name":"carrot"), 
("id":8,"parentId":3, "name": "cabbage"}, 
("id":9,"parentId":3, "name":"potato"}, 
"id":10, "parentId":3, 'name":" lettuce") 


] 


使 用 'loadFilter' 创建 树 形 菜单 (Tree) 


$('#tt').tree({ 
url: 'data/tree6_data.json', 
loadFilter: function(rows) { 
return convert(rows); 
j 


3): 


转换 的 实现 


function convert(rows) { 
function exists(rows, parentId){ 
for(var i-0; i«rows.length; i++){ 
if (rows[i].id -- parentId) return true; 


return false; 


j 


var nodes - []; 
// get the top level nodes 
for(var i-0; i«rows.length; i++){ 
var row - rows[i]; 
if (!exists(rows, row.parentId) ){ 
nodes. push({ 
id:row.id, 
text: row.name 


+); 
} 


var toDo = []; 
for(var i-0; i«nodes.length; i++){ 
toDo.push(nodes[i]); 


} 
while(toDo.length){ 
var node = toDo.shift(); // the parent node 
// get the children nodes 
for(var i=0; i<rows.length; i++){ 
var row = rows[i]; 
if (row.parentId == node.id){ 
var child = {id:row.id, text:row.name}; 
if (node.children) { 
node.children.push(child) ; 
} else { 
node.children = [child]; 
} 


toDo.push(child); 


} 


return nodes; 


FA jQuery EasyUl 实例 


jeasyui-tree-tree6.zip 


jQuery EasyUl 树 形 菜单 - 创建 基础 树 形 网 格 


树 形 网 格 (TreeGrid) 组 件 从 数据 网 格 (DataGrid) 继承 ， 但 是 允许 在 行 之 间 存 在 
父 / 子 节 点 关系 。 许 多 属性 继承 至 数据 网 格 (DataGrid) ， 可 以 用 在 树 形 网 格 
(TreeGrid) 中 。 为 了 使 用 树 形 网 格 (TreeGrid) ， 用 户 必 须 定义 'treeField' 属 
性 ， 指 明 哪 个 字段 作为 树 节点 。 


本 教程 将 向 您 展示 如 何 使 用 树 形 网 格 (TreeGrid) 组 件 设 置 一 个 文件 夹 浏览 。 


Folder Browser 


Hame Size Modified Date 
1 i «4&c 02/19/2010 
2 4 Program Files 120 MB 03/20/2010 
3 Q Java 01/13/2010 
6 (MySQL 01/13/2010 
10 4 eclipse 01/20/2010 


11 eclipse. exe 56 KB 05/19/2009 


eee aes fuu Pr 
1 KB 04/20/2010 





13 [E notice. html T KB 03/17/2005 


创建 树 形 网 格 (TreeGrid) 


<table id="test" title="Folder Browser" class="easyui-treegrid' 
url="data/treegrid_data. json" 
rownumbers="true" 
idField="id" treeField="name"> 
<thead> 
<tr> 
<th field="name" width="160">Name</th> 
<th field="size" width="60" align="right">Size</th: 
<th field="date" width="100">Modified Date</th> 
</tr> 
</thead> 
</table> 


| — B 





下 载 jQuery EasyUl 实例 


jeasyui-tree-treegrid1.zip 


W3School jQuery Ul 教程 


jQuery EasyUl 树 形 菜单 - 创建 复杂 树 形 网 格 


树 形 网 格 (TreeGrid) 可 以 展示 有 限 空间 上 带 有 多 列 和 复杂 数据 电子 表格 。 本 教程 
将 演示 如 何 将 表格 数据 排列 在 分 割 的 网 格 和 多 行 表 关中 ， 以 便 组 织 共 同 的 数据 。 


Complex TreeGrid 


2009 2010 
Region 
2st qrt. 3st qrt.: 4st qrt. ist qrt. 2st qrt. 3st qrt. 4st qrt. 
4 CjWrozing = 
B Albin 1800 1903 2183 2133 1923 2018 1838 











[E] Egbert 1800 1903 2183 2133 1923 2018 1838 


Sia Gy Washington 





6 [E Bellingha= 4 | m |» 





B Total 12600 13321 15281 14931 13461 14126 12866 


创建 树 形 网 格 (TreeGrid) 
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<table title="Complex TreeGrid" class="easyui-treegrid" style=' 
url="data/treegrid2_data.json" 
rownumbers="true" showFooter="true" 
idField="id" treeField="region"> 
<thead frozen="true"> 
<tr> 
<th field="region" width="150">Region</th> 
</tr> 
</thead> 
<thead> 
<tr> 
<th colspan="4">2009</th> 
<th colspan="4">2010</th> 
</tr> 
<tr> 
«th field="f1" width="50" align="right">1st qrt.«/1 
«th field-z"f2" width="50" align="right">2st qrt.</1 
«th field-"f3" widthz"50" align="right">3st qrt.</1 
«th field-z"f4" width="50" align="right">4st qrt.</1 
«th field="f5" widthz"50" align="right">1st gqrt.</1 
«th field-"f6" width="50" align="right">2st qrt.</1 
«th fieldz"f7" widthz"50" align="right">3st qrt.</1 
«th field="fF8" widthz"50" align="right">4st qrt.</1 
</tr> 
</thead> 
</table> 


| 
正如 您 所 看 到 的 ， 树 形 网 格 (Treegrid) 的 使 用 和 数据 网 格 (Datagrid) 一 样 。 请 


使 用 'frozen' 属性 来 定义 冻结 列 ， 列 的 'colspan' 和 'rowspan' 属性 来 定义 多 行 表 
ke 





FA jQuery EasyUl 实例 


jeasyui-tree-treegrid2.zip 


jQuery EasyUl 树 形 菜单 - 树 形 网 格 动态 加 载 


动态 加 载 树 形 网 格 有 助 于 从 服务 器 上 加 载 部 分 的 行 数 据 ， 避 兔 加 载 大 型 数据 的 长 时 
间 等 待 。 本 教程 将 向 您 展示 如 何 创 建 带 有 动态 加 载 特性 的 树 形 网 格 (TreeGrid) 。 




















Products 
Name Quantity Price Total 

1 «Computers 人 
2 4 Printers | 

3 [8 Epson WorkForce 845 69 $121.29 $8369.01 | 
4 国 Canon PIXMA MG5320 2 5110.12 51321.44 | 
5 [E] HP Deskjet 1000 Printer 63 $33.95 $2138.85 E 
6 4 Firewall | 

7 国 Cisco RV110W-A-NA-K9 103 $79.95 $8234.85 | 

8 国 ZyXEL ZyWALL USG50 34 $209.99 $7139.66 | 

9 [E] NETGEAR FVS318 67 $89.99 $6029.33 P 
10 CJ Keyboard 


创建 树 形 网 格 (TreeGrid) 


<table title="Products" class="easyui-treegrid" style="width:7( 
url="treegrid3 getdata.php" 
rownumbers="true" 
idField="id" treeField="name"> 
<thead> 
<tr> 
<th field="name" width="250">Name</th> 
<th field="quantity" width="100" align="right">Quar 
«th field="price" width="150" align="right" formati 


«th field-"total" width="150" align="right" formati 
</tr> 


</thead> 
</table> 


Ei — — B 
服务 器 端 代码 


treegrid3_getdata.php 





$id = isset($ POST['id']) ? intval($ POST['id']) : 0; 


include 'conn.php'; 
$result - array(); 
$rs = mysql query("select * from products where parentId-$id"); 
while($row = mysql fetch array($rs))( 
$row['state'] has child($row['id']) ? 'closed' : 'open'; 
$row['total'] = $row['price']*$row['quantity']; 
array push($result, $row); 


j 


echo json encode($result); 


function has_child($id) { 
$rs = mysql query("select count(*) from products where parentIc 
$row = mysql fetch array($rs); 
return $row[0] > 0 ? true : false; 


国安 = 





FA jQuery EasyUl 实例 


jeasyui-tree-treegrid3.zip 


W3School jQuery Ul 教程 


jQuery EasyUl 树 形 菜单 - 树 形 网 格 添加 分 页 


本 教程 展示 如 何 向 带 有 动态 加 载 特性 的 树 形 网 格 (TreeGrid) 添加 分 页 。 


Products 


Name Quantity Price Total 
LJ vuUrriputers 








1 

2 a Electronics 

3 4 3 Digital Cameras 

4 [E] Nikon COOLPIX L26 16.1 MP 12 $74.97 $899.64 = 
er ee Cd 

6 国 Canon PowerShot A2300 32 $91.52 $2928.64 

7 4 C3DVD E 
8 [E Verbatim 95101 4.7 GB 35 $11.81 $413.35 

9 [E Brave 78 $14.99 $1169.22 ~ 
2 [=| 4 4 | Pagell of2| b M © Displaying 1 to 2 of 3 items 


创建 树 形 网 格 (TreeGrid) 


启用 树 形 网 格 (TreeGrid) 的 分 页 特性 ， 必 须 添加 'pagination:true' 属性 ， 这 样 页 
面 加载 时 就 会 向 服务 器 发 送 'page' 和 'rows' 参数 。 


aH 


jQuery EasyUl 树 形 菜 单 - 树 形 网 格 添加 分 页 664 





<table title="Products" class="easyui-treegrid" style="width: 7( 
data-options=" 
url: 'treegrid4_getdata.php', 
rownumbers: true, 
pagination: true, 
pageSize: 2, 
pageList: [2,10,20], 
idField: '‘id', 
treeField: 'name', 
onBeforeLoad: function(row, param) { 
if (!row) { // load top level rows 


param.id = 0; // set id=0, indicate to. 
} 
} 
WS 
<thead> 
<tr> 
<th field="name" width="250">Name</th> 
<th field="quantity" width="100" align="right">Quar 
«th field="price" width="150" align="right" formati 
«th field-"total" width="150" align="right" formati 
</tr> 
</thead> 
</table> 





到 ne 
ARA atin th 3 


treegrid4_getdata.php 


$page = isset($ POST['page']) ? intval($ POST['page']) : 1; 
$rows = isset($ POST['rows']) ? intval($ POST['rows']) : 10; 
$offset = ($page-1)*$rows; 


$id = isset($ POST['id']) ? intval($_POST['id']) : 0; 
include 'conn.php'; 


$result - array(); 

if ($id == 0){ 
$rs = mysql query("select count(*) from products where parentIc 
$row = mysql fetch row($rs); 
$result["total"] = $row[0]; 


$rs = mysql query("select * from products where parentId=0 lim: 
$items - array(); 
while($row = mysql fetch array($rs))( 
$row['state'] = has child($row['id']) ? 'closed' : 'open'; 
array push(S$items, $row); 


$result["rows"] = $items; 
} else { 
$rs = mysql query("select * from products where parentId=$id") , 
while($row = mysql_fetch_array($rs)){ 
$row['state'] = has_child($row['id']) ? 'closed' : 'open'; 
$row['total'] = $row['price']*$row['quantity']; 
array push($result, $row); 


j 


echo json encode($result); 


function has_child($id) { 
$rs = mysql query("select count(*) from products where parentIc 
$row = mysql fetch array($rs); 
return $row[0] > 0 ? true : false; 


j 
E == : 
发 送 到 服务 器 的 参数 包括 : 


e page : 要 加 载 的 当前 页 面 。 
e rows: 页 面 尺 寸 大 小 。 
e id : 父 行 的 id 值 ， 从 服务 器 返回 的 行将 被 添加 。 


当 展开 一 个 行 节点 时 ，'id' 值 是 大 于 0 的 。 当 改 变 页 码 时 ，'id' 值 应 该 被 设置 为 0 来 
放置 加 载 子 行 。 
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jQuery EasyUl 树 形 菜单 - 树 形 网 格 添加 分 页 667 


jQuery EasyUl 树 形 菜单 - 树 形 网 格 惰性 加 载 节 点 


有 时 我 们 已 经 得 到 充分 的 分 层 树 形 网 格 CTreeGrid) 的 数据 。 我 们 还 想 让 树 形 网 格 
(TreeGrid) 按 层 次 惰性 加 载 节 点 。 首先 ， 只 加 载 顶 层 节点 。 然后 点 击 节 点 的 展 

QE 本 教程 展示 如 何 创建 带 有 惰性 加 载 特性 的 树 形 网 格 
TreeGrid) 。 


Lazy Loading 


Name Size Modified Date 
1:49C 02/19/2010 
2 4 3 Program Files 120 MB 03/20/2010 
3 CJ Java 01/13/2010 
4 C MySQL 01/13/2010 
5 {eclipse 01/20/2010 


创建 树 形 网 格 (TreeGrid) 


<table id="test" title="Folder Browser" class="easyui-treegrid' 
data-options=" 
url: 'data/treegrid_data.json', 
method: 'get', 
rownumbers: true, 
idField: 'id', 
treeField: 'name', 
loadFilter: myLoadFilter 


Ws 
<thead> 
<tr> 
«th field="name" width="220">Name</th> 
«th field="size" width="100" align="right">Size</tt 
<th field="date" width="150">Modified Date</th> 
</tr> 
</thead> 


</table> 


Ee 





为 了 放置 加 载 子 节点 ， 我 们 需要 为 每 个 节点 重 命名 'children' 属性 。 正如 下 面 的 代 
码 所 示 ，'children' 属性 重 命 名 为 'children1'。 当 展 开 一 个 节点 时 ， 我 们 调用 
'append' 方法 来 加 载 它 的 子 节点 数据 。 


'loadFilter' 代码 


function myLoadFilter (data, parentId) { 
function setData(){ 
var todo = []; 
for(var i-0; i«data.length; i++){ 
todo.push(data[i]); 


} 
while(todo.length){ 
var node = todo.shift(); 
if (node.children){ 
node.state = 'closed'; 
node.children1 = node.children; 
node.children = undefined; 
todo = todo.concat(node.children1); 


} 


setData(data); 
var tg = $(this); 
var opts = tg.treegrid('options'); 
opts.onBeforeExpand = function(row) { 
if (row.childrent) { 
tg.treegrid('append',( 
parent: row[opts.idField], 
data: row.childreni 
3); 
row.childreni = undefined; 
tg.treegrid('expand', row[opts.idField]); 
} 
return row.children1 == undefined; 
}; 


return data; 


下 载 jQuery EasyUl 实例 


jeasyui-tree-treegrid5.zip 


jQuery EasyUl 表单 


jQuery EasyUl 表单 - 创建 异步 提交 表单 


本 教程 向 您 展示 如 何 通过 easyui 提交 一 个 表单 (Form) 。 我 们 创建 一 个 带 有 
name, email 和 phone 字段 的 表单 。 通 过 使 用 easyui 表单 (form) 插件 来 改变 表 
单 (form) 为 ajax 表单 (form) 。 表 单 (form) 提交 所 有 字段 到 后 台 服 务 器 ， 服 务 
器 义理 和 发 送 一 些 数据 返回 到 前 端 页 面 。 我 们 接收 返回 数据 ， 并 将 它 显 示 出 来 。 


Ajax Form 
Name: name 
Email: abc@gmail. com 
Phone: 800 
| Submit | 


创建 表单 (Form) 


<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax 
«form id="ff" action="form1_proc.php" method="post"> 
<table> 
<tr> 
<td>Name: </td> 
<td><input name="name" type="text"></input></td> 
</tr> 
<tr> 
<td>Email:</td> 
<td><input name="email" type="text"></input></td> 
</tr> 
<tr> 
<td>Phone: </td> 
<td><input name="phone" type="text"></input></td> 
</tr> 
<tr> 
<td></td> 
<td><input type="submit" value="Submit"></input></1 
</tr> 
</table> 
</form> 


E) 


改变 为 Ajax 表单 





$('#ff').form({ 
success:function(data){ 
$.messager.alert('Info', data, 'info'); 


} 
}); 
AR A ds dm 63 
form1 proc.php 


$name - $ POST['name']; 
$email POST['email']; 


= $_ 
$phone = $ POST['phone']; 


echo "Your Name: $name <br/> Your Email: $email <br/> Your Phor 


pj ——————————————— MÀ] 


FA jQuery EasyUl 实例 


jeasyui-form-form1 .zip 





jQuery EasyUl 表单 - 表单 验证 


本 教程 将 向 您 展示 如 何 验 证 一 个 表单 。easyui 框架 提供 一 个 validatebox 插件 来 验 
证 一 个 表单 。 在 本 教程 中 ， 我 们 将 创建 一 个 联系 表单 ， 并 应 用 validatebox 插件 来 
验证 表单 。 然 后 您 可 以 根据 自己 的 需求 来 调整 这 个 表单 。 


Form Validation 
Name: 


name 


Email: 


[s ü Flease enter a valid ezail 
Subject: MÀ 


subject 


Message: 


Submit | 


创建 表单 (form) 


让 我 们 创建 一 个 简单 的 联系 表单 ， 带 有 name、email、subject 和 message 字段 : 


<div style="padding:3px 2px;border-bottom:1px solid #ccc">Form 
«form id="ff" method="post"> 
<div> 
<label for="name">Name:</label> 
<input class="easyui-validatebox" type="text" name="nar 
</div> 
<div> 
«label for="email">Email:</label> 
<input class="easyui-validatebox" type="text" name="emée 
</div> 
<div> 
<label for="Subject">Subject:</label> 
«input class="easyui-validatebox" type="text" name="sulk 
</div> 
<div> 
<label for="message">Message:</label> 
&lt; textarea name="message" style="height :60px;"&gt;&li 
</div> 
<div> 
<input type="Submit" value="Submit"> 
</div> 
</form> 





我 们 添加 一 个 样式 名 为 easyui-validatebox 到 input 标记 ， 所 以 input 标记 将 根据 
validType 属性 应 用 验证 。 


当 表 单 无 效 时 阻止 表单 提交 
当 用 户 点 击 表单 的 submit 按钮 时 ， 如 果 表 单 是 无 效 的 ， 我 们 应 该 阻止 表单 提交 。 
$('#fFF').form({ 
url:'form3 proc.php', 


onSubmit : Function(){ 
return $(this).form('validate'); 
ty 


success: function(data) { 
$.messager.alert('Info', data, 'info'); 
} 


3); 


如 果 表 单 是 无 效 的， 将 显示 一 个 提示 信息 。 


下 载 jQuery EasyUl 实例 


jeasyui-form-form3.zip 


jQuery EasyUl x € - 创建 树 形 下 拉 框 


树 形 下 拉 框 (ComboTree) 是 一 个 带 有 下 列 树 形 结构 (Tree) 的 下 拉 框 
(ComboBox) 。 它 可 以 作为 一 个 表单 字段 进行 使 用 ， 可 以 提交 给 远程 服务 器 。 


在 本 教程 中 ， 我 们 将 要 创建 一 个 注册 表单 ， 带 有 name. address. city 字段 。city 
字段 是 一 个 树 形 下 拉 框 (ComboTree) 字段 ， 在 里 面 用 户 可 以 下 拉 树 面板 (tree 
panel) ， 并 选择 一 个 特定 的 城市 。 


Register X 


Account Information 


y Submit X Cancel 





(Washingt on 


创建 表单 (Form) 


«div id="dlg" class="easyui-dialog" style="width: 500px;height:: 
title-"Register" buttons="#d1lg-buttons"> 
<h2>Account Information</h2> 
«form id="ff" method="post"> 
<table> 
<tr> 
<td>Name: </td> 
<td><input type="text" name="name" style-'widtl 
</tr> 
<tr> 
<td>Address:</td> 
<td><input type="text" name="address" style="w: 
</tr> 
<tr> 
<td>City:</td> 
<td><select class="easyui-combotree" url="data, 
</tr> 
</table> 
</form> 
</div> 
«div id="dlg-buttons"> 
«a href="#" class="easyui-linkbutton" iconCls="icon-ok" onc 
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel' 
</div> 


a ED | 


从 上 面 的 代码 可 以 看 到 ， 我 们 为 一 个 名 为 "city 的 树 形 下 拉 框 (ComboTree) 字段 
设置 了 一 个 url 属性 ， 这 个 字段 可 以 从 远程 服务 器 检索 树 形 结构 (Tree) 数据 。 请 
注意 ， 这 个 字段 有 一 个 样式 名 字 叫 'easyui-combotree'， 所 以 我 们 不 需要 写 任 何 的 
js 代码 ， 树 形 下 拉 框 (ComboTree) 字段 将 自动 泻 染 。 






FA jQuery EasyUl 实例 


jeasyui-form-form2.zip 


jQuery EasyUl 表单 - 格式 化 下 拉 框 


本 教程 向 您 展示 如 何 创建 一 个 简单 的 下 拉 框 (Combobox) ， 让 它 在 下 拉 框 中 显示 
图 片 项 。 您 可 以 在 下 拉 框 (combobox) 上 使 用 formatter RAK d& ie BD eT 4b 


每 一 个 条 目 。 





创建 图 像 下拉 框 (Combobox) 


<input id="cc" style="width:100px" 
url="data/combobox_data.json" 


valueField="id" textField="text"> 
</input> 


$('#cc' ).combobox( { 
formatter: function(row) { 
var imageFile = 'images/' + row.icon; 
return '«img class="item-img" src="'+imageFilet+'"/><spé 






下 载 jQuery EasyUl 实例 


jeasyui-form-form4.zip 


jQuery EasyUl 表单 - 过 滤 下 拉 数 据 网 格 


下 拉 数 据 网 格 (Combogrid) 组 件 和 下 拉 框 (Combobox) 组 件 的 共同 点 是 ， 除 了 
都 具有 下 拉面 板 以 外 ， 它 们 都 是 基于 数据 网 格 (Datagrid) 的 。 下 拉 数 据 网 格 

(Combogrid) 组 件 可 以 过 滤 、 分 页 ， 并 具有 其 他 一 些 数 据 网 格 (Datagrid) 的 功 
能 。 本 教程 向 您 展示 如 何在 一 个 下 拉 数 据 网 格 (Combogrid) 组 件 中 过 滤 数 据 记 


Ko 
Kg| 
Item ID 


EST-10 


Product ID 
K9-DL-01 
K9-RT-02 
K9-RT-02 
K8-RT-02 
K9-RT-02 
K9-CW-01 
K9-CW-01 


K9-RT-01 


List Price Unit Cost Attribute Stauts 
18. 50 12.00 Spotted Adult Female P 全 
135. 50 100.00 Adult Male P 
145. 48 100.00 Adult Female P 3 
255. 50 82.00 Adult Male P 
325. 29 90.00 Adult Fezale P 
125. 50 92.00 Adult Male P 
155. 29 90.00 Adult Female P 
155. 29 90.00 Adult Female P - 


创建 下 拉 数 据 网 格 (Combogrid) 


<input id="cg" style="width:150px"> 


$('#cg').combogrid({ 
panelwidth:500, 

url: 'form5_getdata.php', 
idField:'itemid', 


3); 


'productid', 
:true, 


:'itemid',title:'Item ID',width:60}, 
:'productid',title:'Product ID',align:'right',width:t 
:'listprice',title:'List Price',align:'right',width:t 
:'unitcost', title: 'Unit Cost',align: 'right',width:60_ 
:'attri', title: 'Attribute',width:150}, 

:'status', title: 'Stauts',align: 'center',width:60} 


textField: 
mode: 'remote', 
fitColumns 
columns:[[ 
(field 
(field 
(field 
(field 
(field 
(field 
]] 








下 拉 数 据 网 格 (Combogrid) 组 件 应 该 定义 'idField' 和 'textField' 属性 。 'idField' & 
性 存储 组 件 值 ，'textField' 属性 在 input 文本 框 中 显示 文本 消息 。 下 拉 数 据 网 格 
(Combogrid) 组 件 可 以 以 ‘local’ 或 remote' 模式 过 滤 记 录 。 在 远程 (remote) 模 
式 中 ， 当 用 户 输入 字符 到 input 文本 框 中 ， 下 拉 数 据 网 格 (Combogrid) 将 发 送 'q' 
参数 到 远程 服务 器 。 


AR A arime 


form5 getdata.php 


$q = isset($ POST['q']) ? strval($ POST['q']) : ''; 
include 'conn.php'; 
$rs = mysql query("select * from item where itemid like '%$q%' or [ 
$rows - array(); 
while($row = mysql fetch assoc($rs))( 
$rows[] = $row; 


echo json_encode($rows); 


| — B 





FA jQuery EasyUl 实例 


jeasyui-form-form5.zip 


jQuery EasyUI 插件 


jQuery EasyUl 提供 了 用 于 创建 跨 浏览 器 网 页 的 完整 的 组 件 集合 ， 包括 功能 强大 的 
datagrid (数据 网 格 ) 、treegrid ( 树 形 表格 ) 、 panel (面板 ) 、combo (下 拉 组 
€) 等 等 。 用 户 可 以 组 合 使 用 这 些 组 件 ， 也 可 以 单独 使 用 其 中 一 个 。 


插件 列表 


Base (基础 ) 


Parser 解析 器 
Easyloader 加 载 器 
Draggable 可 拖 动 
Droppable 可 放置 
Resizable 可 调整 尺寸 
Pagination 分 页 
Searchbox 搜索 框 
Progressbar 进度 条 
Tooltip 提示 框 


Layout (布局 ) 


e Panel 面板 
e Tabs 标签 页 /选项 卡 
e Accordion #1 4 Him 
e Layout 布局 


Menu (菜单 ) 5 Button (按钮 ) 


Menu 菜单 
Linkbutton 链接 按钮 
Menubutton 菜单 按钮 
Splitbutton 分 割 按钮 


Form (表单 ) 


Form 表单 
Validatebox 验证 框 
Combo 组 合 
Combobox 组 合 框 
Combotree 组 合 树 
Combogrid 组 合 网 格 
Numberbox 数字 框 


Datebox 日 期 杠 
Datetimebox 日 期 时 间 框 
Calendar H % 

Spinner 微调 器 
Numberspinner 数值 微调 器 
Timespinner 时 间 微 调 器 
Slider 滑 块 


Window (窗口 ) 


e Window 窗口 
e Dialog 对 话 框 
e Messager 消息 框 


DataGrid (数据 网 格 ) 与 Tree (ix) 


Datagrid 数据 网 格 
Propertygrid 属性 网 格 
Tree 树 

Treegrid 树 形 网 格 


插件 


easyui 的 每 个 组 件 都 有 属性 、 方 法 和 事件 。 用 户 可 以 很 容易 地 对 这 些 组 件 进 行 扩 
属性 

属性 是 定义 在 jQuery.fn.{plugin}.defaults。 上 比如 ，dialog 的 属性 是 定义 在 
jQuery.fn.dialog.defaults, 


事件 


事件 (回调 函数 ) 也 是 定义 在 jQuery.fn.{plugin}.defaults。 


方法 

调用 方法 的 语法 : $(‘selector’).plugin(‘method', parameter); 
其 中 : 

selector 是 jquery 对 象 选择 器 。 

plugin 是 插件 名 称 。 


method 是 与 插件 相 匹 配 的 已 存在 方法 。 
parameter 是 参数 对 象 ， 可 以 是 对 象 、 字 符 串 .… 


方法 是 定义 在 jQuery.fn.{plugin}.methods。 每 个 方法 有 两 个 参数 jq 和 param. 28 
一 个 参数 'jq 是 必需 的 ， 引 用 jQuery 对 象 。 第 二 个 参数 'param' 引用 方法 传递 的 实 
际 参 数 。 比 如 ， 要 扩展 dialog 组 件 的 方法 名 为 'mymove' 的 方法 ， 代 码 如 下 : 


$.extend($.fn.dialog.methods, { 
mymove: function(jq, newposition) { 
return jq.each(function(){ 
$(this).dialog('move', newposition); 


3): 


现在 您 可 以 调用 'mymove' 方法 来 移动 对 话 框 (dialog) 到 指定 的 位 置 : 


$('#dd').dialog('mymove', { 


left: 200, 
top: 100 
3): 
开始 使 用 jQuery EasyUl 


下 载 库 ， 并 在 您 的 页 面 中 引用 EasyUI CSS 和 JavaScript 文件 。 


&lt;link rel="stylesheet" type="text/css" href="easyui/themes/defat 
&lt; link rel="stylesheet" type="text/css" href="easyui/themes/icon 
&lt;script type="text/javascript" src="easyui/jquery-1.7.2.min.js"é 
&lt;script type="text/javascript" src="easyui/jquery.easyui.min.js' 


Kim ET 
一 旦 您 引用 了 EasyUl 必要 的 文件 ， 您 就 可 以 通过 标记 或 者 使 用 JavaScript 来 定义 


一 个 EasyUl 组 件 。 比 如 ， 要 项 一 个 带 有 可 折 和 有 登 功能 的 面板 ， 您 需要 编写 如 下 
HTML 代码 : 





&lt;div id="p" class="easyui-panel" style="width: 500px; height :200p) 
title="My Panel" iconCls="icon-save" collapsible="true"&gt; 
The panel content 

&lt;/div&gt; 


BEEN 


当 通 过 标记 创建 组 件 ，'data-options' 属性 被 用 来 支持 自 版 本 1.3 以 来 HTML5 兼容 
的 属性 名 称 。 所 以 您 可 以 如 下 重 宇 上 面 的 代码 : 





&lt;div id="p" class="easyui-panel" style="width: 500px; height : 200p) 
title-"My Panel" data-options="iconCls: 'icon-save',collapsible 
The panel content 

&lt;/div&gt; 


‘| ES 
下 面 的 代码 演示 了 如 何 创建 一 个 绑 定 'onSelect' 事件 的 组 合 框 。 








&lt;input class="easyui-combobox" name="language" 
data-options=" 
url: 'combobox_data.json', 
valueField:'id', 
textField:'text', 
panelHeight:'auto', 
onSelect:function(record)( 
alert(record.text) 


j'&gt; 


W3School jQuery UI 教程 


jQuery EasyUl 扩展 
Portal (制作 图 表 、 列 表 、 球 形 图 等 ) 
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数据 网 格 视 图 (DataGrid View) 
| DataGrid - DetailView | 
Item ID Product ID List Price Unit Cost Attribute status. | 
dh EST-1 FI-SW-01 16.5 10 Large 了 ^ 
» vx Spotted Adult 
dp EST-2 Ka-DL-01 18.5 12 Fenale P 
dh EST-3 RP-SN-01 18.5 12 Venomless P 


Attribute: Rattleless 
i Status: P 











ap :EST-5 RP-LI-02 18.5 12 Green Adult P 
| fh FST-R PT-TSH-nl 55 12 Taillass o P rj | | 
‘DataGrid - GroupView | - 
Product ID List Price Vnit Cost Attribute Status | 
= | 
= K9-DL-01 - 1 Item(s) 
| 2 K9-DL-01 18.5 12 Spotted Adult Female P 
= RP-SH-01 - 2 Item(s) 
3 
4  RP-SN-01 18.5 12 Rattleless 了 
4p RP-LI-02 - 1 Item(s) 
= FL-DSH-01 - 2 Item(s) 
6 FL-DSH-01 58.5 12 Tailless E E 





可 编辑 的 数据 网 格 (Editable DataGrid) 


jQuery EasyUl 扩展 


684 
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Editable DataGrid 








Item ID Product ID List Price Unit Cost Attribute 
EST-1 FI-SW-01 16.5 10 Large 


EST-2 K9-DL-01 18.5 12 Spotted Adult Fezale 





EST-5 RP-LI-02 18.5 12 Green Adult 





EST-6 FL-DSH-01 58.5 12 Tailless 
EST-7 FL-DSH-01 23.5 12 With tail 
EST-8 FL-DLH-02 93.5 12 Adult Fezale 





可 编辑 的 树 (Editable Tree) 


4 Foods 
b (Fruits 
4 E Vegetables 
tomato 
B carrot 
a 
potato 


B lettuce 


数据 网 格 行 过 滤 (DataGrid Filter Row) 





DataGrid 





Item ID Product List Price Unit Cost Attribute 





EST-1 FI-SW-01 3 | No Filter 


EST-10  K9-DL-01 | 1 | Equal Adult Female 
EST-11 RP-SN-01 : Not Equal = 
EST-12 RP-SN-01 jw. Les iss 

: : Greater | 
EST-13 RP-LI-02 pel eee Adult 
EST-15 FL-DSH-01 83.5 12 With tail 





EST-16 FLDIHO 235. 12 Adult Female 


数据 网 格 行 拖 放 (Drag and Drop Rows in DataGrid) 
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DataGrid 

Item ID Product List Price Unit Cost Attribute Status 

EST-1 FLSW-01 365 10 Large P ^ 
EST-10 K9-DL-01 18.5 12. Spotted Adult Female P 

EST-11 RP-SN-01 38.5 12 Venomless P 

EST-12 RP-SN-01 265 12 Rattleless P E 
ETB SETA RP-SN-01 38.5 12 Venomless P 
EST-14 FL-DSH-01 158.5 12 | Tailless Lg 
EST-15 FL-DSH-01 83.5 12 With tail 

EST-16  FL-DLH.02 23.5 12 Adult Female (P = 























Name Size Modified Date 
1: 4c 02/19/2010 
2 4 £ Program Files 120 MB 03/20/2010 
3 b 01/13/2010 
6 4 SMySQL A my-huge.ini 01/13/2010 
7 my.ini 10KB 02/26/2009 
8 my-huge.ini 5KB 02/26/2009 
9 my-large.ini 5KB 02/26/2009 
10 eclipse.ini 1KB 04/20/2010 
主题 (Themes) 
Feat “tet mx betacrid Tree Nenu C: 
Y Tent « erai tarax || Edoetacria | 
av f DetwGrid 
v a tent O ns mx [jseeeria Tree Wenn o 
F " ac V Titles * iter ID Product List Price Unit Cost Attribute eire 
: x | Meurdion for jüvery I St haa »*i 10 leg — ^ 4 Cjrelderz 
= d| nm "e 2 EST-:D  Daleaticn 18.3 12 Spotted i] Gris 
= faeta so d 3 ESI-1i — -Rattleanske 28 co E up gom 
$ (Fem re 4 ESTOD — Fattleenake = maera a 
u$ meister tmnt , jüuerr EasyEI frasework help you build | 
mere easily. È fStT-:34 — Mens 358 your web page easily. 
[S 7 ESI-i5 — Mane a3 
$ Titled A 8 ESI-:6 Persian 63 Yo x Cancel | 
Titles * |? * nl : = 
、 口 口 
DWR 加 载 器 (DWR Loader) 
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DWR 


RTL 支持 (RTL support) 

































































« West Main Tite » East 
v Titlet DataGrid || About NH gaia 
| ] J || About || Photos © 4 
Status Attribute Unit Cost ListPrice ProductID  ItemID |  ProgramFilesC3» | 
E Intel [E 
content2 P Large 10 365 FI-SW-01 EST-1 Java B 
P  otted Adult Female 12 185  K9-DL-04 EST-10 Microsoft Office [3) 
index.html {=} 
P Rattleless 12 26.5 RP-SN-01 EST-12 about htm! [) 
P Green Adult 12 355 RP-LI-O2 EST-13 welcome.html [E 
P Tailless 12 1585 FL-DSH-01 EST-14 
Y Title3 | ~ 
Ribbon 
| Home | Insert | 
nr of Cut Arial v[2v]4& & =e = | | 的 Fim|v 
^1 Copy 2 = i 
Paste E COPY BIUS x % zÉ i dà Find 
3 % Format Cay qu => | Goto... 
Clipboard Font 





Paragraph Editing 
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免责 声明 


W3School 提 供 的 内 容 仅 用 于 培训 。 我 们 不 保证 内 容 的 正确 性 。 通 过 使 用 本 站 内 容 
随 之 而 来 的 风险 与 本 站 无 关 。W3School 简 体 中 文 版 的 所 有 内 容 仅 供 测试 ， 对 任何 
法 律 问题 及 风险 不 承担 任何 责任 。 


